无法获得材料的目标属性 - ui选择反应组件

Question

我正在尝试从Material-UI反应组件的Select字段元素中获取id,name和value.

这是我的容器:

//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-ui),那么这可以按预期工作(即我可以获得id,name,所选选项的正确值).如何从Material-UI Select组件的onChange事件中获取目标id,name..etc？

PS我_onChange对材料-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");
}

因此调用.getAttribute以“data-”开头的属性名称

Answer 2

更新2

针对您的评论：

根据Material-ui 文档，预计会返回选项元素而不是选择元素上的 touchtap 事件。如果您想要元素的 id 和名称，我建议将变量绑定到回调：

父组件中的onchange方法：

_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
}

当你将它附加到选择组件时，你需要使用bind

   <Select
     value={this.props.test}
     name={"test"}
     id={"test"}
     onChange={this.props.onChange.bind(null,"id","name")}
     hintText={"Select a fitch rating service"}>

更新

这是反应事件文档。在事件池下，您将找到e.persists()引用块中的使用的参考。本期给出的解释是，React 池化了事件对象，因此当另一个事件被触发时它会被重用。

React 有一个相当特殊的事件对象。它将本机事件包装在合成事件中，这就是event您的方法中所指向的内容_onChange。问题是这个合成事件对象被回收并重用于下一个事件，因此它被垃圾收集并设置为 null。我认为这没有很好的记录，但我会搜索链接并在找到后更新此答案。

解决方案是让事件处理程序中的第一行创建事件的副本、保留它或获取对本机事件的引用：

制作事件的副本

_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); 
};