如何 link 带有单选按钮的文本字段

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 属性与该状态字段的值相关联。

您似乎还需要一个复选框，而不是单选按钮，因为如果只有一个单选按钮，单选按钮将无法取消切换。

此代码可能无法工作 as-is（我没有运行），但应该提供一个起始想法：

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

如何 link 带有单选按钮的文本字段

How to link a text field with a radio button

reactjs

reactstrap