Reactjs + MaterialUI：SelectField事件处理

我试图通过ReactJS和MaterialUI构建我的网站。具体来说，我试图建立一个SelectField的表格。它看起来非常容易，但是当我试图使它成为受控组件时，我陷入了困境。我只是希望每当用户在下拉列表中选择一个项目时，该项目将变为选择字段的value。Reactjs + MaterialUI：SelectField事件处理

渲染的选择字段是这样的（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>

和函数其中I处理onChange事件是：

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

Unofrtunately，当我选择一个项目，evt.target.value结果未定义。任何人都可以看到我错过了什么？我应该使用该活动的其他房产吗？我无法从文档中弄清楚。

来源

2016-02-13 Nicola Miotto

我自己找到了答案：显然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>

来源

2016-02-13 11:59:14

显然，的onChange函数接收所选择的值作为第三个参数，所以你可能会直接使用。

来源

2017-04-18 05:14:02

感谢它解决了我的问题 –

是，第三事件是有效负载值根据文档：当选择的菜单项

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

回调函数烧制。事件：以所选菜单项为目标的TouchTap事件。返回页首返回页首返回页首返回页首返回页首返回页首返回页首返回页首返回页首返回页首返回页首返回页首返回页首返回页首返回页首返回页首返回页首返回页首键：所选菜单项的索引，如果多个为真，则为undefined。有效负载：如果多个为真，则菜单的值数组与菜单项的值相加（如果尚未选择）或省略（如果已选择）。否则，该菜单项的值。

例子：

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

来源

2017-08-31 22:41:41

Reactjs + MaterialUI：SelectField事件处理

回答

相关问题