Пользовательский флажок реагирует только один, чтобы проверить - PullRequest
Новая
       1

Пользовательский флажок реагирует только один, чтобы проверить

0 голосов
/ 29 мая 2019

У меня есть этот компонент-флажок! 

const CheckBox = props =>{
    var [show,setshow] = useState(false);
    const option = props.name.replace(/\s/g, '');
    return(
       <div className="filter-option" onClick={e=>setshow(!show)} data={option}>
          <div className={show?"check-bock checked":"check-bock"} >
              <i className="fa fa-check"></i>
          </div>
          <label className="font-20">{props.name}</label>
       </div>
     )
}

В отмеченном классе будет отображаться флажок, но если я хочу отобразить несколько флажков, проблема в том, что все флажки отмечены одновременно!

Iхотите, чтобы только один отмечен, а другие не отмечены!

1 Ответ

1 голос
/ 29 мая 2019

Решение состоит в том, чтобы сохранить в состоянии, какой флажок отмечен, и сохранить это состояние в родительском элементе, из которого отображаются все флажки 

const CheckBox = props =>{
    const option = props.name.replace(/\s/g, '');
    return(
       <div className="filter-option" onClick={e=>props.setshow(prev => props.name == prev? '': props.name)} data={option}>
          <div className={props.show?"check-bock checked":"check-bock"} >
              <i className="fa fa-check"></i>
          </div>
          <label className="font-20">{props.name}</label>
       </div>
     )
}

const Parent = () => {

    var [show,setshow] = useState('');
    return (
       <>
         <Checkbox name="first" show={"first" === show} setShow={setShow}/>
         <Checkbox name="second" show={"second" === show} setShow={setShow}/>
       </>
    )

}
...