Reactjs + Material UI：选择字段事件处理答案

【问题标题】：Reactjs + MaterialUI: SelectField event handlingReactjs + Material UI：选择字段事件处理
【发布时间】：2016-02-13 11:13:06
【问题描述】：

我正在尝试通过 ReactJS 和 MaterialUI 构建我的网站。具体来说，我正在尝试使用SelectField 构建一个表单。它看起来很简单，但是当我试图使它成为一个受控组件时，我被卡住了。我只是希望每当用户在下拉列表中选择一个项目时，该项目就会成为选择字段的value。

渲染出来的select字段是这样的（websites是一个字符串数组）：

<SelectField floatingLabelText="Website" onChange={(evt) => this.websiteDidChange(evt)} value={this.state.website} >
            {websites.map(function(w, index){
              return  <MenuItem key={index} label={w} value={w}>{w}</MenuItem>;
            })}
</SelectField>

我处理onChange事件的函数是：

  websiteDidChange(evt) {
    this.setState({
      website: evt.target.value
    });
  }

不幸的是，当我选择一个项目时，evt.target.value 结果未定义。谁能看到我错过了什么？我应该使用事件中的另一个属性吗？我无法从文档中真正弄清楚。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我自己找到了答案：显然onChange 回调接收两个参数：事件和新选择的索引。所以我更新了如下代码，它可以工作了：

websiteDidChange(newIndex) {
  this.setState({
    website: websites[newIndex]
  });
}

...

<SelectField floatingLabelText="Website" onChange={(evt, newIndex) => this.websiteDidChange(newIndex)} value={this.state.website} >
            {websites.map(function(w, index){
              return  <MenuItem key={index} label={w} value={w}>{w}</MenuItem>;
            })}
</SelectField>

【讨论】：

【解决方案2】：

显然，onChange 函数接收选择的值作为第三个参数，因此您可以直接使用它。

【讨论】：

【解决方案3】：

是的，第三个事件是根据文档的有效负载值：

http://www.material-ui.com/#/components/select-field

选择菜单项时触发回调函数。

签名：函数（事件：对象，密钥：数字，有效负载：任意）=> void 事件：针对所选菜单项的 TouchTap 事件。钥匙：所选菜单项的索引，如果 multiple 为真，则未定义。有效负载：如果多个为真，则菜单的值数组与添加菜单项的值（如果尚未选择）或省略（如果它已经被选中）。否则，菜单项的值。

例子：

<SelectField
            value={this.props.someValue}
            onChange={(evt, key, payload)=>console.log(payload)}
        >

【讨论】：