Question

在单击任何文本字段之前，应将其禁用。选择单选按钮后，必须启用我的文本字段。

Answer 1

这是您问题的有效解决方案。

class App extends React.Component {
  state = {
    isRadioSelected: true
  };
  changeHandler = () => {
    this.setState({ isRadioSelected: false });
  };
  render() {
    return (
      <div className="App">
        <h3>Input text is {this.state.isRadioSelected ? 'Disabled': 'Enabled'}</h3>
        <input type="text" disabled={this.state.isRadioSelected} />
        <br />
        <label>Select Radio Button</label>
        <input type="radio" onChange={this.changeHandler} />
      </div>
    );
  }
}
ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root' />

Answer 2

您的描述非常模糊，您没有任何代码示例，但是您可能想要执行以下操作：

将单选按钮设置为controlled component，以便您可以在React状态下访问它的值。
将输入的disabled属性绑定到该状态字段的值。

似乎还想要一个复选框，而不是一个单选按钮，因为如果只有一个单选按钮，则不能取消切换单选按钮。

此代码可能无法按原样工作（我尚未运行），但应提供一个入门思路：

function Tester() {
  const [radioValue, setRadioValue] = useState(false)
  return (
    <div>
      <input type="radio" onClick={(e) => setRadioValue(e.target.value)} value={radioValue} />
      <input type="text" placeholder="your input box" disabled={!radioValue} />
    </div>
  )
}

如何使用单选按钮链接文本字段

2 个答案: