Question

我正在使用material-ui构建一个React应用。我想在某个事件发生时禁用RadioGroup中的所有单选按钮，并在事件消失后重新启用它们。（例如，当我单击一个按钮时，所有单选按钮都被禁用，当我再次单击同一按钮时，所有单选按钮都被重新启用。）我有以下条件渲染代码段，其中有一个三元运算符可以完成这项工作，但看起来确实很多余。有一个更好的方法吗？又名有没有办法将Material-ui组件的prop（此处为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>

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

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钩子在状态之间切换以禁用和启用FormControlLabels。而不是使用变量或道具。然后，使用按钮在创建状态的是与否之间切换，如上所示。无需有条件地渲染它们，因为已禁用的prop接受一个布尔值，以从false切换为true。

材质用户界面有条件禁用的无线电

2 个答案: