react-md SelectField onChange 没有正确更新答案

【问题标题】：react-md SelectField onChange not updating properlyreact-md SelectField onChange 没有正确更新
【发布时间】：2019-04-21 13:50:16
【问题描述】：

我正在使用'react-md' 库，我正在尝试使用SelectField 组件，但是当我为onChange 发送函数时，选择字段不再按预期更新。

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)
   />
  )
}

当我不在 handleSelection 函数中调用 this.setState() 时，单击项目时菜单会按预期更改，但是当我调用 setState 时，它会延迟更新选择。如果菜单显示“至多”并且我点击“至少”，它将停留在“至多”，然后如果我点击“至多”，它将然后更改“至少”。

我在输入字段中遇到过类似的问题，为了解决这个问题，我使用了onBlur 而不是onChange，但是react-md 库的onBlur 没有以我需要的方式触发。

【问题讨论】：

标签： javascript reactjs material-design

【解决方案1】：

您可以使用SelectField 组件的 value 属性。创建一个状态并将其绑定到SelectField 值属性，并将onChange 事件中的状态更新为所选值。

【讨论】：

如何将状态绑定到“SelectField”的 value 属性？