React Material UI选择事件的捕获引用内部



我在使用材料选择时遇到问题。我想在onChange((函数中捕获整个对象。当前事件仅捕获选定的值。例如:如果我选择状态"进行中",我想捕获该对象的Status_CODE。

class ExmComp extends Component {
constructor(props) {
super(props);
this.state = {
status:'Open' ,
};
const statusList = [
{
"STATUS_ID": 10,
"STATUS": "Open",
"STATUS_CODE": "OSNO",
"LINK": "open",
"ICON": "done_outline"
},
{
"STATUS_ID": 20,
"STATUS": "In Progress",
"STATUS_CODE": "NOPR",
"LINK": "inProgress",
"ICON": "play_arrow"
},
{
"STATUS_ID": 40,
"STATUS": "Cancelled",
"STATUS_CODE": null,
"LINK": "cancelled",
"ICON": "cancel_presentation"
},
{
"STATUS_ID": 30,
"STATUS": "Closed",
"STATUS_CODE": "NOCO",
"LINK": "closed",
"ICON": "close"
}
];

event.target.value仅返回值。在这里我要捕获整个对象示例如果选择关闭,我想捕获整个关闭的对象

/* {
"STATUS_ID": 30,
"STATUS": "Closed",
"STATUS_CODE": "NOCO",
"LINK": "closed",
"ICON": "close"
}*/
handleChange = event => {
this.setState({status: event.target.value});
};
render(){
return(
<Select
select
label="Status"
value={status}
onChange={this.handleChange}
>
{statusList.map(option => (
<MenuItem key={option.STATUS_ID} value={option.STATUS}>
{option.STATUS}
</MenuItem>
))}
</Select>
)
}
}

您不能在handleChange函数中从"statusList"数组中筛选出完整的对象吗?类似这样的东西:

handleChange = event => {
const fullObject = statusList.filter(val => event.target.value === val.STATUS)[0];
console.log(fullObject);
this.setState({ [event.target.name]: event.target.value });
};

代码-https://codesandbox.io/s/2zy7m2701r

最新更新