如何将文本字段与单选按钮链接答案

【问题标题】：How to link a text field with a radio button如何将文本字段与单选按钮链接
【发布时间】：2019-10-03 20:25:05
【问题描述】：

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

【问题讨论】：

您正在寻找对 React 组件进行条件渲染。你已经尝试过什么？请提供代码示例。 stackoverflow.com/help/reprex

【解决方案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' />

【讨论】：

【解决方案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>
  )
}

【讨论】：