Выберите радио на всех родительских div ширина и высота - PullRequest
Новая
       36

Выберите радио на всех родительских div ширина и высота

0 голосов
/ 31 октября 2019

так что у меня есть простой компонент: 

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;

Мне нужно сделать этот радиовход для всей длины и ширины элемента.

Поэтому, когда пользователь нажимает кнопку "RadioButton""область дивы, радиовход будет отмечен

enter image description here

1 Ответ

1 голос
/ 31 октября 2019

Я бы поддерживал состояние выбранного радио через родительский компонент, который будет обновляться обработчиком щелчков, передаваемым через реквизиты от родителя дочерним компонентам радио, и присоединяться к внешнему div. Выбор входного компонента можно определить, посмотрев, соответствует ли selectedRadio, переданный через реквизиты, идентификатору для этой конкретной радиостанции, также передаваемой через реквизиты. 

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