无法获取Material-UI的目标属性-选择React组件 [英] Can't get the target attributes of material-ui select react component

问题描述

我正在尝试从Material-UI react组件的Select字段元素中获取ID，名称和值.

I'm trying to get the id,name, and value from Select field element of Material-UI react component.

这是我的容器:

//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?

It seems as though the passed argument to _onChange(evt) is not the SELECT but rather the option since when i print out evt.target it gives <div>whatever the selected value was</div>. anyone knows why? If i use a plain select field (not material-ui) then this works as expected (i.e. i can get the id,name, correct value of selected option). How do i get the target id, name..etc from onChange event of Material-UI Select component?

P.S我对material-ui的TextField组件使用相同的_onChange方法，并且在那里工作.我也尝试过:

P.S i'm using the same _onChange method for TextField component of material-ui and it works there. I've also tried:

 _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

针对您的评论:

Update 2

In response to your comments:

根据 material-ui文档，重新触摸一下选项元素上发生事件，而不是选择元素上发生事件.如果您想要元素的ID和名称，我建议将变量绑定到回调:

As per the material-ui docs, getting back the touchtap event on option element rather than the select element is expected. If you want the id and name of the element, I would suggest binding the variables to the callback:

父组件中的onchange方法:

The onchange method in the parent component:

_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

And when you attach it to the select component, you need to use 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合并了事件对象，因此当事件对象被重用时另一个事件被触发.

Update

Here are the react event docs. Under the event-pooling you will find reference to the use of e.persists() in the block quote. The explanation given in this issue is that React pools the event object, so it get's reused when another event is fired.

React有一个非常特殊的事件对象.它将本机事件包装在综合事件中，这是event在您的_onChange方法中指向的内容. 问题在于，此合成事件对象被回收并重新用于下一个事件，因此将其垃圾回收并设置为null.我认为这没有充分的文档记录，但是我将搜索链接并在找到答案后更新此答案.

React has a rather special event object. It wraps the native event in a synthetic event, which is what event points to in your _onChange method. The problem is that this synthetic event object is recycled and reused for the next event, so it is garbage collected and set to null. I don't think this is well documented, but I'll search for a link and update this answer once I find it.

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

The solution is for the first line in your event handler to make a copy of the event, persist it, or get a reference to the native event:

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

这篇关于无法获取Material-UI的目标属性-选择React组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！