React handle form submit

Question

I'm trying to create a form in React/Redux. For now I just want the form to trigger my function handleSubmit when the form is submitted. However at the moment it looks like the function is triggered instantly on page load ...

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

I know the rest of the code isn't all correct yet but my main concern now is just getting the onSubmit action triggered at the right moment.

Thanks in advance!

Solution

Looks like you're not binding your handleSubmit.

From the docs:

Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind this to the instance.

You've got three options

1. Add a constructor and do the binding there (recommended):

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

2. Bind directly:

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

3. Use arrow => functions

   onSubmit={() => this.handleSubmit}

Comments

[U r s u s]

Note that submit is fired only on the form element, not the button or submit input. (Forms are submitted, not buttons.). So you shouldn't put onSubmit on the button.

[Raulucco]

This was just a name fort the property

[U r s u s]

The point is that your suggestion completely by-passes the onsubmit event of the form element.

[Hai Nguyen]

2 first ones are working but the 3rd option is not working. It should be like this: onSubmit={() => this.handleSubmit()}

[Mzq]

but the event is not passed in?