选中时，MUI单选将在onChange中传递标签和值
选中时，MUI单选将在onChange中传递标签和值
提问于 2021-10-28 23:41:32
我使用的是reactjs，我有一个MUI RadioGroup组件，我想从这个组件中一起传递所选值的标签。
我的单选按钮代码
<RadioGroup
aria-label="am-time-in"
value={state.AM_time_in_value}
name="radio-buttons-group"
onChange={onChangeRadioAMIN}
>
{
state.AM_timelogs_IN ?
state.AM_timelogs_IN.map((radio) => (
<Tooltip
title={
<>
<Typography variant="caption">
{`Scan Location: ${radio.scan_location}`}
</Typography>
<br />
<Typography variant="caption">
{`Scanned By: ${radio.scanned_by}`}
</Typography>
</>
}
>
<FormControlLabel value={radio.time_check.split(',')[1].slice(1)} control={<Radio size="small" />} label={radio.time_standard} item={radio} />
</Tooltip>
)) : null
}
</RadioGroup>我的onchange函数：
const onChangeRadioAMIN = (event, value) => {
console.log(event);
event.persist();
setState((prev) => ({
...prev,
AM_time_in_value: value,
}));
}回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-28 23:56:24
您需要创建一个id字段来标识您的选项：
const options = [
{
id: 0,
scan_location: value_1,
scanned_by: value_2,
time_check: value_3,
time_standard: value_4,
},
{
id: 1,
scan_location: value_1,
scanned_by: value_2,
time_check: value_3,
time_standard: value_4,
},
...
];并将id传递给FormControlLabel的value属性，当用户更改选项时，change处理程序将接收id。请注意，您不能将option对象传递给value，因为它将被强制转换为string，否则您只能获得[object Object]：
{options.map((o) => (
<FormControlLabel
value={o.id} // <---- pass a primitive id value, don't pass the whole object here
control={<Radio />}
label={o.time_standard}
/>
))}然后，您可以从该id中找到所选的选项对象，其中包含所需的所有字段：
<RadioGroup
onChange={(e, value) => {
const id = parseInt(value, 10);
const option = options.find((o) => o.id === id);
// setState
}}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69762100
复制相关文章
相似问题
腾讯云开发者
