Question

我正在尝试通过ReactJS和MaterialUI构建我的网站。具体来说，我正在尝试使用SelectField构建表单。它看起来很容易，但随后我陷入困境，因为我试图让它成为一个受控组件。我只是希望每当用户在下拉列表中选择一个项目时，该项目就成为选择字段的value。

渲染的选择字段是这样的（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结果未定义。任何人都可以看到我错过了什么？我应该使用活动的其他财产吗？我无法从文档中弄明白。

Answer 1

我自己找到了答案：好的$("#sendphoto").click(function () { var url = "http://41.128.183.109:1212/api/Data/GetImage"; var data = { imgName: "test" }; $.ajax({ url: url, type: 'Get', data: data, success: function (data) { alert("Success"); }, error: function (data) { alert("Please Check Your Internet Connection"); } }); });回调接收到两个参数：事件和新选择的索引。所以我更新了下面的代码并且它可以工作：

onChange

Answer 2

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

Answer 3

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

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

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

签名：function（event：object，key：number，payload：any）=＆gt;空虚   event：针对所选菜单项的TouchTap事件。键：   所选菜单项的索引，如果multiple为true，则为undefined。   payload：如果multiple为true，则菜单的value数组带有   菜单项的增值（如果尚未选择）或省略（如果   它已被选中）。否则，菜单项的值。

示例：

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

Reactjs + MaterialUI：SelectField事件处理

3 个答案: