Переключатели React не изменятся

Я пытаюсь управлять своими переключателями с помощью состояния, чтобы я мог добавить активный класс для переключателя при нажатии. Я застрял сейчас, потому что мне нужно дважды щелкнуть, чтобы изменить переключатель, и после того, как они изменились один раз, я не могу получить больше вывода консоли. Может кто-нибудь увидеть, что не так?

import React, { Component } from 'react'

class CustomRadio extends Component {
    constructor(props) {
        super(props);

        this.state = {
            name:'', 
            id:'', 
            value:'', 
            onChange:'', 
            label:'', 
            validationMsg:'',
            rbValue:'',
            checked:''
        };
    }

    onSelect = (e) => {          
        this.setState({    
            rbValue: e.target.value
        });
        //console.log(this.state.rbValue);
        console.log(e.target.value);
        console.log(this.props.checked);
    }

    // setClass = () => {
    //     if (this.state.rbChecked === true)
    //         return "active"
    //     else
    //         return "inactive"
    // }
    
    render() {
        //let rbActiveClass = this.setClass();
        return (  
            // <div className={`form-item custom-radio ${rbActiveClass}`}>
            <div className={`form-item custom-radio`}>
                {this.props.label && 
                    <label htmlFor={this.props.id}>
                        {this.props.label}
                    </label>
                }

                <input                     
                    type="radio" 
                    id={this.props.id} 
                    name={this.props.name} 
                    value={this.props.value} 
                    checked={this.state.rbValue === this.props.checked}
                    //defaultChecked={this.props.defaultChecked} 
                    onChange={this.onSelect.bind(this)}
                />

                {this.props.validationMsg && 
                    <span className="validation-message">
                        {this.props.validationMsg}
                    </span>
                }
            </div>
        )
    }
}

export default CustomRadio

person implum    schedule 15.07.2020    source источник


Ответы (1)


просто измените конструктор компонента:

class CustomRadio extends Component {
constructor(props) {
    super(props);
    this.state = {
        //...         
        rbValue:props.checked,
        //...
    };
}

а также компонент ввода:

<input                     
  //...
  checked={this.state.rbValue}
  //...
  />
person Rahmat Anjirabi    schedule 15.07.2020