React Handle Formular senden

Question

Ich versuche, ein Formular in React/Redux zu erstellen. Jetzt möchte ich nur, dass das Formular meine Funktion handleSubmit auslöst, wenn das Formular abgeschickt wird. Doch im Moment sieht es aus wie die Funktion sofort beim Laden der Seite ausgelöst wird ...

export default class AssetsAdd extends React.Component { 

    componentDidMount() { 
    console.log(this) 
    } 

    handleSubmit(event) { 
    if (this.refs.titleInput !== '') { 
     event.preventDefault(); 
     var asset = { 
     date: '', 
     title : this.refs.titleInput.value, 
     id : '', 
     type: this.refs.typeInput.value 
     } 

     return this.props.dispatch(addAsset(asset)) 
    } 


    } 

    render() { 
    return (
     <div> 
     <Row> 
      <Portlet title='New Asset' form> 
      <Form horizontal onSubmit={this.handleSubmit}> 
       <FormGroup> 
       <Label text='Title' size='3' /> 
       <Input ref="titleInput" placeholder='Enter asset title' size='4'/> 
       </FormGroup> 
       <FormGroup> 
       <Label text='Type' size='3' /> 
       <Input ref="typeInput" placeholder='Enter asset type' size='4'/> 
       </FormGroup> 
       <FormGroup> 
       <Label text='Description' size='3' /> 
       <Input ref="descriptionInput" placeholder='Enter asset description' size='4'/> 
       </FormGroup> 
       <FormGroup> 
       <Label text='Documentation' size='3' /> 
       <Input ref="documentationInput" placeholder='Enter documentation URL' size='4'/> 
       </FormGroup> 
       <FormActionBar> 
       <SubmitButton value='Submit'/> 
       <CancelButton value='Cancel'/> 
       </FormActionBar> 
      </Form> 
      </Portlet> 
     </Row> 
     </div> 
    ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
    assets: state.assets 
    }; 
} 

export const AssetAddContainer = connect(mapStateToProps)(AssetsAdd); 

weiß, dass ich der Rest des Codes nicht alle richtig noch nicht, aber meine größte Sorge jetzt gerade ist immer die onSubmit Aktion ausgelöst im richtigen Moment.

Vielen Dank im Voraus!

Answer 1

Sieht so aus, als ob Sie Ihre nicht binden.

Von the docs:

Methoden die gleiche Semantik wie regelmäßige ES6 Klassen folgen, was bedeutet, dass sie diese an die Instanz nicht automatisch binden.

Sie drei Optionen haben

1. einen Konstruktor hinzufügen und dort die Bindung tun (empfohlen):

   this.handleSubmit = this.handleSubmit.bind(this);

2. Bind direkt:

   onSubmit={this.handleSubmit.bind(this)}

3. Verwenden => Funktionen

   onSubmit={() => this.handleSubmit}

Answer 2

Sie benötigen die handleSubmit als Stütze

<SubmitButton value='Submit' onSubmit={this.handleSubmit.bind(this)}/> 

dann auf die Schaltfläche, dass prop zuweisen passieren auf der Render-Funktion der SubmmitButton Komponente.

// submmit button component @render method 

<button onClick={this.props.onSubmit} >Submit</button>