onChange на флажок не срабатывает в ответ - PullRequest
Новая
       8

onChange на флажок не срабатывает в ответ

0 голосов
/ 19 мая 2018

Хорошо, прежде чем принять решение опубликовать этот вопрос, я много искал и перепробовал много вещей, так что вот случай, который у меня есть 

<div className="btn-group" data-toggle="buttons">
 <label htmlFor="test" className="btn win-checkbox-btn" onClick={e => e.stopPropagation()}>
  <input id="test" autoComplete="off" className="taggable" type="checkbox" name="test" onChange={(e) => { console.log(e) }} />
 someText
 </label>
 <input autoComplete="off" className="taggable" type="checkbox" name="test2" onChange={(e) => { console.log(e) }} />
</div>

Так что здесь происходит, что функция onChange на первом флажке (один внутри метки с именем test) вообще не срабатывает, но функция onChange во втором флажке (test2) срабатывает нормально.Мне это нужно внутри этикетки, потому что я использую кнопки Bootstrap .поэтому я использую загрузчик 3.3.7 и реагирую 15.6.0.Больше информации в том, что использование атрибута htmlFor на ярлыке или его удаление ни на что не влияет, а обработчик onClick, который я использую на ярлыке, находился в решении, которое я нашел во время поиска, но также не помогло вообщеи удаление или добавление его ни на что не влияет.

Любая подсказка здесь очень поможет, заранее спасибо.

1 Ответ

0 голосов
/ 19 мая 2018

Ваш флажок не должен быть внутри тега label, поскольку тег label обрабатывает событие click в вашем коде.Вам нужно вообще это событие onclick "onClick = {e => e.stopPropagation ()}" на ярлыке?

Вместо этого вы можете попробовать следующий код: <label htmlFor="test" >someText </label> <input id="test" autoComplete="off" type="checkbox" name="test" onChange={(e) => { console.log(e) }} />

...