javascript - Material-ui 有条件禁用收音机
问题描述
我正在使用 material-ui 构建一个 React 应用程序。我想在RadioGroup
某个事件发生时禁用我的所有单选按钮,并在事件消失时重新启用它们。(比如说,当我单击一个按钮时,所有收音机都被禁用,当我再次单击同一个按钮时,所有收音机都被重新启用。)我有以下条件渲染片段和一个三元运算符,它可以完成这项工作,但它看起来真的是多余的。有一个更好的方法吗?又名。有没有办法让disable
Material-ui 组件的 prop ( 这里 ) 变成一个变量?谢谢!
const radioDisabled = false;
// Some mechanism here that could potentially
// change the value of radioDisabled
{ radioDisabled
?
<RadioGroup row
value={value}
onChange={(e)=>{setValue(e.target.value)}}
>
<FormControlLabel
value='1'
checked={value === '1'}
control={<Radio/>}
label='1'
/>
<FormControlLabel
value='2'
checked={value === '2'}
control={<Radio/>}
label='2'
/>
...
<FormControlLabel
value='n'
checked={value === 'n'}
control={<Radio/>}
label='n'
/>
</RadioGroup>
:
<RadioGroup row
value={value}
onChange={(e)=>{setValue(e.target.value)}}
>
<FormControlLabel
disabled // the only difference from above
value='1'
checked={value === '1'}
control={<Radio/>}
label='1'
/>
<FormControlLabel
disabled // the only difference from above
value='2'
checked={value === '2'}
control={<Radio/>}
label='2'
/>
...
<FormControlLabel
disabled // the only difference from above
value='n'
checked={value === 'n'}
control={<Radio/>}
label='n'
/>
</RadioGroup>
解决方案
这是我摆脱冗余的两个选项:
第一个选项是您可以选择删除三元条件渲染,而是disabled
根据条件渲染道具,例如disabled={radioDisabled}
const [radioDisabled, setRadioDisabled] = React.useState(false);
<FormControlLabel
disabled={radioDisabled}
value="1"
checked={value === "1"}
control={<Radio />}
label="1"
/>
第二个选项是您可以遍历无线电输入的值/标签,然后再次根据条件评估是否需要禁用
const [radioDisabled, setRadioDisabled] = React.useState(false);
const radioInputs = [
{
value: 1,
label: 1
},
{
value: 2,
label: 2
},
{
value: 3,
label: 3
}
];
{radioInputs.map((radioInput) => {
return (
<FormControlLabel
disabled={radioDisabled}
value={radioInput.value}
checked={value == radioInput.value}
control={<Radio />}
label={radioInput.label}
/>
);
})}
CodeSandBox:https ://codesandbox.io/s/patient-worker-8mrq3?file=/src/App.js:1717-2041
推荐阅读
- amazon-web-services - Iam 权限与资源权限
- postgresql - 由于 VPN 会话关闭而失去与服务器的连接时,避免取消 postgresql 脚本
- python - 在 Python 中使用字段解决钻石问题的最佳方法
- html - 如何在不向我的 HTML 添加类或 id 的情况下设置元素的样式?
- objective-c - 如何为现有的 Objective-C git 工作指定 SPM 的版本
- sql - 如何从多个日期内的计数中获取 pl/sql 的平均值
- reactjs - useState React 传递颜色
- java - 在 Tomcat 10.x 上部署 Spring 5.x
- flutter - Flutter - 对带有模型的图表使用 API
- git - 如何克隆到 git 存储库中的特定标签,而不包括该标签之后的历史记录或提交?