React handle form submit

Question

J'essaie de créer un formulaire dans React/Redux. Pour l'instant, je veux juste que le formulaire déclenche ma fonction handleSubmit lorsque le formulaire est soumis. Cependant, pour le moment, la fonction se déclenche instantanément au chargement de la page ...

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);

Je sais que le reste du code n'est pas encore tout à fait correct, mais ma principale préoccupation est maintenant de déclencher l'action onSubmit au bon moment.

Merci d'avance!

Answer 1

On dirait que vous ne liez pas votre handleSubmit.

De les docs :

Les méthodes suivent la même sémantique que les classes ES6 normales, ce qui signifie qu'elles ne le lient pas automatiquement à l'instance.

Vous avez trois options

1. Ajoutez un constructeur et faites la liaison là-bas (recommandé):

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

2. Lier directement:

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

3. Utilisez les fonctions fléchées =>

   onSubmit={() => this.handleSubmit}