How to link a text field with a radio button

Question

Before Clicking anything text field should be disable . when after the radio button selected my text field must be enable.

You are looking to do conditional rendering of React components. What have you tried already? Please provide code samples. https://stackoverflow.com/help/reprex — Philip Wrage, May 16 '19 at 14:14

score 2 · Accepted Answer · answered May 16 '19 at 14:20

This is the working solution of your question.

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' />

score 0 · Answer 2 · answered May 16 '19 at 14:20

Your description is pretty vague and you don't have any code samples, but here's likely what you want to do:

Make the radio button a controlled component, so that you can access it's value within React's state.
Tie the input's disabled attribute to the value of that state field.

It also seems like you want a checkbox, and not a radio button, since a radio button cannot be untoggled if there is only a single radio button.

This code will likely not work as-is (I haven't run it), but should provide a starting idea:

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

How to link a text field with a radio button

2 Answers2