Question

我试图用状态控制单选按钮，以便在单击单选按钮时可以为其添加活动类。我现在停滞了，因为我需要双击以使单选按钮更改，并且在更改一次后，我无法再获得控制台输出。有人可以看到出什么问题了吗？

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

Answer 1

只需更改组件构造函数：

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

以及输入组件：

<input                     
  //...
  checked={this.state.rbValue}
  //...
  />

反应单选按钮不会改变

1 个答案: