Как в React при переключении radiobutton делать disable/undesable для соответствующих блоков, к примеру, для двух инпутов с типом текст

Question

    Помогите понять, как работает в компоненте обновление состояние, на примере переключения радиокнопки, делая при этом disable/undisable для двух текстовых инпутов? 

    import React from "react";

class ButtonClick extends React.Component{

    render() {
        return (
            <label className="radioButton">
                <input type="radio" name="radio_1"/> Radio_1
                <input type="radio" name="radio_2"/> Radio_2
                <input type="text" name="inputOne" value="" placeholder=""/>Input_1
                <input type="text" name="inputOne" value="" placeholder=""/>Input_1
            </label>
        );
    }
}

export default ButtonClick

Answer 1

В state сохраняйте выбранный radio-пункт, а в input устанавливайте свойство disabled в зависимости от его значения:

class ButtonClick extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
        selected: 'radio_1'
      }
    }
    
    onChange = (e) => {
      this.setState({
        selected: e.target.name
      });
    }
    render() {
        return (
            <label className="radioButton">
                <input 
                  type="radio" 
                  name="radio_1"
                  checked={this.state.selected === 'radio_1'}
                  onChange={this.onChange}
                /> Radio_1
                <input 
                  type="radio" 
                  name="radio_2"
                  checked={this.state.selected === 'radio_2'}
                  onChange={this.onChange}
                /> Radio_2
                <input 
                  type="text" 
                  name="inputOne" 
                  value="" 
                  placeholder=""
                  disabled={this.state.selected !== 'radio_1'}
                /> Input_1
                <input 
                  type="text" 
                  name="inputOne" 
                  value="" 
                  placeholder=""
                  disabled={this.state.selected !== 'radio_2'}
                /> Input_1
            </label>
        );
    }
}

ReactDOM.render( <ButtonClick/> , document.querySelector("#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"></div>

БЛОГ НА HUSL

Как в React при переключении radiobutton делать disable/undesable для соответствующих блоков, к примеру, для двух инпутов с типом текст

Ответы (1 шт):