Блог

Главная - Вопросы по программированию - При нажатии кнопки, как добавить выбранный класс и удалить его из всех других кнопок в функциональном компоненте React?

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

#javascript #reactjs

#язык JavaScript #реагирует на

Вопрос:

В настоящее время я изучаю React, и у меня есть функциональный компонент для меню. При нажатии на значение я хочу добавить класс «выбор-выбран», чтобы визуально показать, что он был выбран, и убедиться, что ни у одной другой кнопки нет класса. Есть ли способ создать такое поведение без создания отдельного крючка useState для каждого выбора?

Вот мой код:

 function SortMenu(props){  const [clickedDay, setClickedDay] = useState('');  const [clickedMonth, setClickedMonth] = useState('');  const [clickedYear, setClickedYear] = useState('');  const choice = (value) =gt;{  props.setSort(value);   switch(value){  case 'day':  setClickedDay( (prevVal) =gt; {  prevVal =='' ? setClickedDay('choice-selected'): setClickedDay('');  setClickedMonth('');  setClickedYear('');  });  break;  case 'month':  setClickedMonth( (prevVal) =gt; {  prevVal =='' ? setClickedMonth('choice-selected'): setClickedMonth('');  setClickedDay('');  setClickedYear('');  })  break;  case 'year':  setClickedYear( (prevVal) =gt; {  prevVal =='' ? setClickedYear('choice-selected'): setClickedYear('');  setClickedDay('');  setClickedMonth('');  })  break;   }  }  return(  lt;nav className="sortmenu"gt;  lt;div className={`${clickedDay} choice`} onClick={() =gt; {choice("day");}}gt;Daylt;/divgt;  lt;div className={`${clickedMonth} choice`} onClick={() =gt; {choice("month")}}gt;Monthlt;/divgt;  lt;div className={`${clickedYear} choice`} onClick={() =gt; {choice("year")}}gt;Yearlt;/divgt;  lt;/navgt;  ) }

В настоящее время мой код работает, но если мне нужно добавить больше вариантов, я должен не только добавить еще один вариант, но и добавить новые варианты в существующие варианты. Мне интересно, есть ли более простой или лучший способ реализовать это поведение?

Комментарии:

1. Если бы одновременно был выбран только один вариант, вы могли бы заменить clickedDay , clickedMonth , и clickedYear на clickedChoice и clickedChoice установить значение '' или 'day' или 'month' или 'year' .

2. Если бы я это сделал, я не уверен, как мне самостоятельно установить выбранный класс для дивов?

3. Имя класса={`${clickedChoice === ‘день’ ? «выбор-выбран» : «} выбор`}

Ответ №1:

Вот рабочий пример решения, которое я описал в комментариях.

 const { useState } = React;  const SortMenu = () =gt; {  const [clickedChoice, setClickedChoice] = useState('');   const choice = (value) =gt; {  setClickedChoice(prev =gt; prev === value ? '' : value);  };   return (  lt;navgt;  lt;div  className={`${clickedChoice === 'day' ? 'choice-selected' : ''} choice`}  onClick={() =gt; choice('day')}  gt;Daylt;/divgt;  lt;div  className={`${clickedChoice === 'month' ? 'choice-selected' : ''} choice`}  onClick={() =gt; choice('month')}  gt;Monthlt;/divgt;  lt;div  className={`${clickedChoice === 'year' ? 'choice-selected' : ''} choice`}  onClick={() =gt; choice('year')}  gt;Yearlt;/divgt;  lt;/navgt;  ) }  ReactDOM.render(lt;SortMenu/gt;, document.querySelector('#root')); 
 .choice {  border: 1px solid black;  padding: 2px; }  .choice-selected {  background-color: pink; } 
 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"gt;lt;/scriptgt; Click an option to de/select it. lt;div id="root"gt;lt;/divgt;
Метки: ,