reactjs - 无法获取material-ui select React组件的目标属性

Question

我正在尝试从 Material-UI React 组件的 Select 字段元素中获取 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);

在我的演示组件中:

  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(evt)正在给出这个值:

  evt.id is blank
  evt.name is undefined
  evt.target.value is <div>whatever the selected value was</div> 

似乎传递给 _onChange(evt) 的参数不是SELECT而是自从我打印出 evt.target 以来的选项它给出 <div>whatever the selected value was</div> 。有人知道为什么吗？如果我使用普通选择字段(不是 Material 用户界面)，那么这将按预期工作(即我可以获得所选选项的 id、名称、正确值)。如何从 Material-UI Select 组件的 onChange 事件中获取目标 id、名称等？

P.S我正在使用相同的_onChange Material-ui 的 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
  };

Answer 1

我会使用 event.currentTarget 而不是 event.target 来保持更简单。在事件处理程序中，您可以通过以下方式从触发事件的元素访问感兴趣的属性:

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

因此对前缀为“data-”的属性名称调用.getAttribute