Javascript 材料ui有条件禁用无线电

我正在用material ui构建一个React应用程序。我想在某个事件发生时禁用RadioGroup中的所有单选按钮，并在事件消失时重新启用它们。例如，当我单击一个按钮时，所有收音机都被禁用，当我再次单击同一个按钮时，所有收音机都被重新启用。我有下面的带三元运算符的条件渲染片段，它完成了这项工作，但看起来确实是多余的。有更好的方法吗？又称作有没有一种方法可以让道具在这里禁用一个材质ui组件到一个变量中？谢谢

                        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={radioDisabled}

第二个选项是，您可以迭代无线电输入的值/标签，然后根据条件再次评估是否需要禁用

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:

以下是我消除冗余的两个选项：

第一个选项是，您可以选择删除三元条件渲染，而是根据条件渲染禁用的道具，例如disabled={radioDisabled}

第二个选项是，您可以迭代无线电输入的值/标签，然后根据条件再次评估是否需要禁用

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

代码沙盒：

使用React的useState钩子在状态之间切换以禁用和启用FormControlLabel。而不是使用变量或道具。然后，如上图所示，使用一个按钮在所创建状态的true和false之间切换。不需要有条件地渲染它们，因为禁用的prop接受一个从false切换到true的布尔值

---

使用React的useState钩子在状态之间切换以禁用和启用FormControlLabel。而不是使用变量或道具。然后，如上图所示，使用一个按钮在所创建状态的true和false之间切换。无需有条件地呈现它们，因为禁用的prop接受一个布尔值以从false切换到true。

在呈现jsx元素时，可能会执行一些迭代以删除冗余YHMM。。我目前不确定应该如何进行循环来完成我在这里的任务。我应该将我的RadioGroup组件封装到单独的组件中吗？但是，在迭代FormControlLabel时，如何插入禁用的道具？能否创建问题的演示沙盒？在呈现jsx元素时，可能会执行一些迭代以删除冗余YHMM。。我目前不确定应该如何进行循环来完成我在这里的任务。我应该将我的RadioGroup组件封装到单独的组件中吗？但是，在迭代FormControlLabel时，我如何插入禁用的道具呢？你能为你的问题创建一个演示沙盒吗？不过，很抱歉行动太晚了。感谢您提供高度参数化的FormControlLabel！我学到了很多。不过很抱歉行动太晚了。感谢您提供高度参数化的FormControlLabel！我学到了很多。谢谢你的回答！从你的回答中我学到了很多。我将另一个答案设置为taked答案，只是因为另一个答案已经发布了。@Young我很高兴你从这个答案中学到了一些新东西。另外，如果你想让你的编程更上一层楼，从打字脚本开始->他是个很好的老师。此外，Ben->用于fullstack开发。祝你一切顺利。真的很感激！谢谢你的回答！从你的回答中我学到了很多。我将另一个答案设置为taked答案，只是因为另一个答案已经发布了。@Young我很高兴你从这个答案中学到了一些新东西。另外，如果你想让你的编程更上一层楼，从打字脚本开始->他是个很好的老师。此外，Ben->用于fullstack开发。祝你一切顺利。真的很感激！

import { useState } from 'react'

const [isRadioDisabled, setIsRadioDisabled] = useState(false)

<Button title='Disables RadioButtons' 
  onPress={() => setIsRadioDisabled(prevState => !prevState)} />

    <RadioGroup row
      value={value}
      onChange={(e)=>{setValue(e.target.value)}}
      >
        <FormControlLabel
          disabled={radioDisabled}
          value='1'
          checked={value === '1'}
          control={<Radio/>}
          label='1'
        />
        <FormControlLabel
          disabled={radioDisabled}
          value='2'
          checked={value === '2'}
          control={<Radio/>}
          label='2'
        />

        <FormControlLabel
          disabled={radioDisabled}
          value='n'
          checked={value === 'n'}
          control={<Radio/>}
          label='n'
        />
    </RadioGroup>