无法获取Material-UI的目标属性-选择React组件

小编典典

无法获取Material-UI的目标属性-选择React组件

reactjs

我正在尝试从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-
ui），那么它将按预期工作（即，我可以获取ID，名称，所选选项的正确值）。如何从Material-UI
Select组件的onChange事件获取目标ID，名称..etc？

PS我_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
  };

阅读 309

2020-07-22

共1个答案

小编典典

更新2

针对您的评论：

根据material-ui docs，应该返回option元素而不是select元素的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"}>

更新资料

这是react事件文档。在事件池下，您可以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); 
};

2020-07-22