简体   繁体   中英

React onChange from <select> field not firing

I have Parent and Child components. My child component houses a select field with some options and these should update the Parent's state when clicked (onChange), yet they do not. I threw in a debugger into the function which should be running when the onChange() occurs, but it never hits it. Where am I going wrong here?

Parent Component Function

 updateModal(evt) {
  this.setState({ reason: evt.target.value})
 }

Passed as a prop like so:

<PastSessions
  updateModal={this.updateModal.bind(this)}
/>

And then here is my Child Component with the select field.

<select value={this.props.reason} onChange={this.props.updateModal}>
   <option value='One'>One</option>
   <option value='Two'>Two</option>
   <option value='Three'>Three</option>
</select>

I ended up re-writing it and it works. Looks like this:

  handleUpdateChange(e) {
    this.setState({
      reason: e.target.value
    })
  }

passed as props like so

handleUpdateChange={this.handleUpdateChange.bind(this)}

called like this

<select value={this.props.reason} onChange={this.props.handleUpdateChange}>

Works like a charm

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM