Как я могу получить объект из значения кнопки?

#javascript #html #reactjs

#javascript #HTML #reactjs

Вопрос:

Я использую метод map для массива объектов для создания кнопки:

 arrayOfObjects.map(obj => ( 
  <button value={obj} onClick={handleClick} key={obj._id}>
    {obj.name}
  </button>
  

где:

 const handleClick = ({ target }) => {
  const obj = target.value
  onClick(obj) // this onClick is a prop from another React function component
}
  

Как мне получить сам объект? При этом я получаю следующее:
Метод onClick установит состояние моего компонента, но это не то, что я ищу

Ответ №1:

Вы можете обернуть функцию handleClick объектом:

 const handleClick = (obj) => () => {
  onClick(obj) 
}
  

и с помощью кнопок:

 arrayOfObjects.map(obj => ( 
  <button onClick={handleClick(obj)} key={obj._id}>
    {obj.name}
  </button>
  

Ответ №2:

Замените свой код этим

 arrayOfObjects.map(obj => ( 
  <button :value=obj onClick="handleClick" :key=obj._id>
    {{obj.name}}
  </button>
  

Ответ №3:

Значение сохраняется в виде строки, а не объекта.

Вместо этого вы должны сделать что-то вроде

 arrayOfObjects.map(obj => ( 
  <button onClick={()=>onClick(obj)} key={obj._id}>
    {obj.name}
  </button>