Блог

Я пытаюсь изменить стиль динамически генерируемых компонентов при нажатии на них, но только по одному за раз. Я не смог найти ответ, который работал бы для моего кода.

Сгенерированные компоненты :

 <Col>
  {ageCategoriesDisplay.map((category) => (
   <h3
      key={category}
      onClick={(() => categoryCheckHandler(category), ToggleClass)}
   >
   {category}
   </h3>
))}
</Col>
 

Пожалуйста, не обращайте внимания на categoryCheckHandler, это связано с чем-то другим. toggleClass на данный момент пуст.

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

Я нашел несколько ответов, используя «старый» способ выполнения действий в react, с конструктором и «этим», но я не знаком с этим способом выполнения действий, я работаю с крючками. Любая помощь будет высоко оценена.

Что вы можете сделать, так это создать дочерний компонент.

 ageCategoriesDisplay.map(item => (
   <ChildComponent useWhenChange={ runsomefunction } item={item}/>
)
 

Вы можете использовать этот элемент в цикле, и он автоматически создаст столько элементов, сколько есть в вашей категории.

 const ChildComponent = (props) => {

    const [ someState, setSomeState ] = useState({ fontSize: '1rem'})
    const [ addClass, setAddClass ] = useState(false);

    const onClickFunction = () => {
        setAddClass(true)
        setSomeState({ fontSize: '2rem' })
        props.useWhenChange() // <-- also can call parent function
    }
    return ( <div><h1 onClick={onClickFunction} className={ addClass ? 'somecssClass' : ''} style={someState}>Click Me To Change Size</h1>
             {/* you can also render the props e.g. name */}
             <h2>{props.item.name}</div>
             </div>
}
 

выше продемонстрирован вызов родительской функции, переключение базы классов на true / false, рендеринг элемента .map и настройка стиля.