单击内部收音机后选择 <div>

Question

在无线电组件中，目标行为是：

所以当用户点击"RadioButton" div一个区域时，单选输入将被标记
'default' radio styles are currently appearing - which should extend to the height and width of the entire RadioButton div

   const Radio = (props) => {
            return (
                <div className="RadioButton">
                        <div className="card mx-3 mb-3">
                            <div className="card-body hightlight">
                                <div className={"icon-type" + props.icon}></div>
                                <input id={props.id} onChange={props.changed} value={props.value} type="radio" checked={props.isSelected} />
                                {props.name}
                            </div>
                        </div>
                </div>
            );
        }

        export default Radio;

Answer 1

我将通过父组件维护所选无线电的状态，该父组件将通过点击处理程序更新，点击处理程序通过道具从父组件传递到无线电子组件，并附加到外部 div。输入组件是否被选中可以通过查看通过 props 传递的 selectedRadio 是否与该特定无线电的标识符匹配来确定，该标识符也将通过 props 传递。

const radioIds = [ ]; // whatever identifiers may be required

Parent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       selectedRadio = 1;
     }

    selectRadio = id => {
      this.setState({ selectedRadio: id });
    }

    render() {
       return (
           <div>
              {radioIds.map(id => <Radio handleRadioSelect={this.radioSelect} id={id} selectedRadio={this.state.selectedRadio} />) // include other props
           </div> 
       )
    }
  }


const Radio = (props) => {
    return (
        <div className="RadioButton" onClick={() => props.handleRadioSelect(props.id)>
                <div className="card mx-3 mb-3">
                    <div className="card-body hightlight">
                        <div className={"icon-type" + props.icon}></div>
                        <input id={props.id} value={props.value} type="radio" checked={props.selectedRadio === props.id} />
                        {props.name}
                    </div>
                </div>
        </div>
    );
}

单击内部收音机后选择 <div>

Selecting <div> after clicked internal radio

button

radio

radio-group

reactjs