Ftyjtk

I'm using the 'react-md' library and I am trying to use the SelectField component, but when I send a function for onChange the select field no longer updates as it's supposed to.

handleSelection = (value, index, event, details) => {

  // "details.id" is the id of the field which I am using to keep track of state  

  this.setState({[details.id]: value});

}



render() {

  const STRING_SELECTORS = ['At most', 'At least'];



  return(

  <div>

   <SelectField

     id="calories-selector"

     className="md-cell selector md-cell--5"

     menuItems={STRING_SELECTORS}

     defaultValue="At most"

     onChange={this.handleSelection)

   />

  )

}

When I don't call this.setState() in the handleSelection function, the menu changes as expected when clicking an item, however when I do call setState, it updates the selection on a delay. If the menu says "At most" and I click "At least" it will stay at "At most" then if I click "At most" it will then change the "At least".

I've had a similar issue with input fields, and to solve this I used onBlur instead of onChange, but the react-md library's onBlur doesn't get triggered in the way that I need.

You can use the value prop of SelectField component. Create a state and bind it to the SelectField value prop and update the state at onChange event to the selected value.