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

Question

我正在尝试通过 ReactJS 和 MaterialUI. Specifically, I am trying to build a form with a SelectField 来构建我的网站。看起来很简单，但当我试图让它成为一个受控组件时，我陷入了困境。我只是希望每当用户 select 在下拉列表中添加一个项目时，该项目就会成为 select 字段的 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
    });
  }

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

Answer 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>

Answer 2

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

Answer 3

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

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

Callback function fired when a menu item is selected.

Signature: function(event: object, key: number, payload: any) => void event: TouchTap event targeting the menu item that was selected. key: The index of the selected menu item, or undefined if multiple is true. payload: If multiple is true, the menu's value array with either the menu item's value added (if it wasn't already selected) or omitted (if it was already selected). Otherwise, the value of the menu item.

示例：

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

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

Reactjs + MaterialUI: SelectField event handling

reactjs

material-ui