Как я могу удалить имя_класса из других вложенных братьев и сестер после того, как Радио вход изменился в React?

Как я могу удалить имя_класса из других вложенных братьев и сестер после изменения входа радио в React?

Я пытаюсь изменить цвет метки одного радиовхода. Цвет меняется. Однако, когда я нажимаю на другие радиокнопки, класс сохраняется. Я хочу, чтобы только один переключатель имел измененный класс. Вот мой код До сих пор я устал выполнять цикл по нему и использовал classList Remove для удаления класса из других элементов метки. Все, что я пробовал, — это утверждение if, я пытался сравнить лейбл Element с остальными.

Вот codeSandbox, поэтому на него проще ответить https://codesandbox.io/s/naughty-curie-b8fd2?fontsize=14

 function checkInput(e) { let labelElement = e.target.parentNode; let bgElement = labelElement.parentNode.parentNode; bgElement.classList.add('checked'); if( labelElement !== labelElement ){ var oldChecked = document.getElementsByClassName('checked'); for (let i = 0; i {amp}lt; oldChecked.length; i  ){ oldChecked[i].classList.remove('checked'); } } } class ServiceLevel extends Component { render(){ return ( {amp}lt;div{amp}gt; {amp}lt;Segment{amp}gt; {amp}lt;Menu attached="top" borderless={true}{amp}gt; {amp}lt;Menu.Item{amp}gt; {amp}lt;Header{amp}gt;Scale:{amp}lt;/Header{amp}gt; {amp}lt;Label className="filter_check" size="large"{amp}gt; {amp}lt;Form.Radio label="Year" control="input" type="radio" name="period" onChange={checkInput} /{amp}gt; {amp}lt;/Label{amp}gt; {amp}lt;Label className="filter_check" size="large"{amp}gt; {amp}lt;Form.Radio label="Quarter" control="input" type="radio" name="period" value="quarter" onChange={checkInput} /{amp}gt; {amp}lt;/Label{amp}gt; {amp}lt;Label className="filter_check" size="large"{amp}gt; {amp}lt;Form.Radio label="Month" control="input" type="radio" name="period" value="month" onChange={checkInput} /{amp}gt; {amp}lt;/Label{amp}gt; {amp}lt;Label className="filter_check" size="large"{amp}gt; {amp}lt;Form.Field label="Date" control="input" type="radio" name="period" value="date" onChange={checkInput} /{amp}gt; {amp}lt;/Label{amp}gt; {amp}lt;Label className="filter_check" size="large"{amp}gt; {amp}lt;Form.Field label="Interval" control="input" type="radio" name="period" value="interval" onChange={checkInput} /{amp}gt; {amp}lt;/Label{amp}gt; {amp}lt;/Menu.Item{amp}gt; {amp}lt;/Menu{amp}gt; {amp}lt;/Segment{amp}gt; {amp}lt;/div{amp}gt; ) } } export default ServiceLevel; 

Css даже то, что вам, вероятно, нужен только JSX

 .filter_check input { display: none; } div.ui.large.label.filter_check.checked { background-color: #00b5ad; } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector