Material-ui 根据条件禁用的单选框

Question

我正在使用material-ui构建一个React应用程序。当发生某个事件并且该事件消失时，我想禁用RadioGroup中的所有单选按钮，并在事件消失时重新启用它们。(例如，当我点击一个按钮时，所有单选按钮都被禁用，当我再次点击同一个按钮时，所有单选按钮都会重新启用。) 我有以下条件渲染片段和三元运算符，可以完成工作，但看起来非常冗余。有没有更好的方法来完成这个功能？即，是否有一种方法可以将Material-ui组件的属性(disable在这里)变成一个变量？谢谢！

                        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>

- Young

---

可能在呈现JSX元素时执行一些迭代以消除冗余。 - 95faf8e76605e973

嗯...我目前不确定如何编写循环以完成我的任务。我应该将我的RadioGroup组件封装到一个单独的组件中吗？但是当迭代FormControlLabel时，如何插入disabled属性呢？ - Young

你能否创建一个演示沙盒来展示你的问题？ - Nidhi Dadiya

Answer 1

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

第一个选项是，您可以选择删除三元条件渲染，并根据条件呈现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

CodeSandBox是一个在线的代码编辑器和调试工具，可以帮助开发者更加高效地进行前端开发。以上链接是一个示例项目的代码地址，你可以点击链接查看并进行修改、调试。

- 95faf8e76605e973

---

抱歉回复晚了。非常感谢您提供高度参数化的FormControlLabel！我受益匪浅。 - Young

Answer 2

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>

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

- Tom Bombadil

---

谢谢你的回答！我从你的回答中学到了很多。我将另一个回答设置为被采纳的答案，只是因为那个回答发布得更早。 - Young

@Young，我很高兴你从这个答案中学到了新东西。如果你想将编程提升到下一个级别，可以从Typescript开始 -> https://www.youtube.com/watch?v=WBPrJSw7yQA&t=11s 这位老师非常优秀。此外，Ben -> https://www.youtube.com/watch?v=I6ypD7qv3Z8&t=47168s 可以学习全栈开发。祝你一切顺利。 - Tom Bombadil

非常感謝！ - Young