Reactjs 无法获取物料ui选择反应组件的目标属性

我试图从MaterialUI组件的SelectField元素中获取id、名称和值

这是我的容器：

//some code is removed to keep things simple
class MyContainer extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return(
        <MyComp onChange={this._onChange.bind(this)}  />
    );
  }

  _onChange(evt) {
    console.log(evt.target); 
    console.log(evt.target.id);  //blank
    console.log(evt.target.name); //undefined 
    console.log(evt.target.value); //html value of selected option!

  }

 }
 export default connect(select)(MyContainer);

似乎传递给_onChangeevt的参数不是SELECT，而是选项，因为当我打印出evt.target时，它给出了所选值的值。有人知道为什么吗？如果我使用的是普通的选择字段而不是材质ui，那么这将按预期工作，即我可以获得所选选项的id、名称和正确值。如何从Material UI Select组件的onChange事件中获取目标id、名称..等

另外，我对MaterialUI的TextField组件使用了相同的更改方法，它在那里工作。我也试过：

 _onChange = (event, index, value) => {
    console.log(event.target.id); //blank
    console.log(event.target.name); //undefined
    console.log(index); //correct index
    console.log(value); //correct value
  };

更新2 针对你的评论：

根据，在option元素而不是select元素上返回touchtap事件是预期的。如果需要元素的id和名称，我建议将变量绑定到回调：

父组件中的onchange方法：

  import React, {Component} from 'react';
  import Select from 'material-ui/SelectField';
  import MenuItem from 'material-ui/MenuItem';

  const someData = ["aaaa", "bbbb", "ccccc"];

  class MyComp extends Component {

    render() {
      const {onChange} = this.props;

      return (
        <form >
            <Select
                    value={this.props.test}
                    name={"test"}
                    id={"test"}
                    onChange={this.props.onChange}
                    hintText={"Select a fitch rating service"}>
              {
                someData.map((e) => {
                  return <MenuItem key={Math.random()}  value={e} primaryText={e}/>
                })
              }
            </Select>
        </form>
      );
    }
  }

_onChange(id, name, evt, key, payload) {

  console.log(id);  //id of select
  console.log(name); //name of name
  console.log(payload); //value of selected option
}

将其附着到“选择”构件时，需要使用

坚持下去 获取对本机事件对象的引用 我会使用event.currentTarget而不是event.target使它更简单。 在事件处理程序中，您可以通过以下方式从触发事件的元素访问感兴趣的属性：

_onChange(evt) {
    console.log(evt.currentTarget.getAttribute("data-name");
    console.log(evt.currentTarget.getAttribute("data-value");
}

---

因此，在数据前面的属性名称上调用.getAttribute-

这是最新版本的Material UI和React 2020的答案：

元素上需要有name属性。该名称值应与对象中字段的名称相对应

此应工作名称设置为您尝试更新的字段：

 <Select
            labelId="demo-simple-select-outlined-label"
            id="demo-simple-select-outlined"
            name="taskType"
            value={props.job.taskType || ""}
            label="{props.label}"
            onChange={props.onTaskTypeChange}
          >

---

event.native未定义！还有，为什么对于TextField组件，它可以正常工作，但对于Select组件则不行？尝试了event.nativeEvent。event.nativeEvent的值给出了MouseEvent{isTrusted:true，screenX:1086，screenY:640，clientX:845，clientY:543…}这似乎不正确！此外，event.nativeEvent.target还提供了所选选项~不知何故，目标是选择的选项，而不是选择组件本身！i、 e.event.nativeEvent.target吐出的html是刚刚单击的，我似乎找不到一种方法来获取实际的目标select组件以获取其id和名称。@Johnyunan，我已经添加了一个更新，关于如何获取回调中select元素的id和名称的详细信息刚刚尝试了第二次更新和获取id的代码，name，每个console.log的空字符串_onChangeid，name，evt。有没有可能成为一个傻瓜？

_onChange = (event, index, value) => {
  e = _.cloneDeep(event); // Here I'm using the cloneDeep method provided by underscore / lodash . User whatever library you prefer. 
  console.log(e.target.id); 
  console.log(e.target.name); 
};

_onChange = (event, index, value) => {
  event.persist() // This stops react from garbage collecting the event object. It may impact performance, but I doubt by much.
  console.log(event.target.id); 
  console.log(event.target.name); 
};

_onChange = (event, index, value) => {
  e = event.native; // This looks the same as a vanilla JS event
  console.log(e.target.id); 
  console.log(e.target.name); 
};

_onChange(evt) {
    console.log(evt.currentTarget.getAttribute("data-name");
    console.log(evt.currentTarget.getAttribute("data-value");
}

 <Select
            labelId="demo-simple-select-outlined-label"
            id="demo-simple-select-outlined"
            name="taskType"
            value={props.job.taskType || ""}
            label="{props.label}"
            onChange={props.onTaskTypeChange}
          >

 <Select
            labelId="demo-simple-select-outlined-label"
            id="demo-simple-select-outlined"
            value={props.job.taskType || ""}
            label="{props.label}"
            onChange={props.onTaskTypeChange}
          >