react-md SelectField onChange 没有正确更新

Posted 2023-02-22

【中文标题】react-md SelectField onChange 没有正确更新

【英文标题】：react-md SelectField onChange not updating properly

【发布时间】：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 没有以我需要的方式触发。

【参考方案1】：

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

【讨论】：

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