无法获取Material-UI的目标属性-选择React组件
我正在尝试从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
};
-
更新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); };