0

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

Сам код максимально упростил: https://pastebin.com/8EQxwhfb

Кратко: Дан массив объектов: humans, который я разворачиваю через .map() + прикрепленная к инпуту функция OnChange, которая принимает id объекта, находит его через if и должна изменять.

Задача: Изменять в реальном времени любой из инпутов через onChange

Проблема: Не могу через Onchange передать и значение event.target.value, и id развернутого объекта, чтобы изменить его через функцию.

Функция:

function OnChange(id){

    setHumans(
        humans.map(elem=>{
            if(elem.id === id){
                elem.name = 555;
            }
            return elem
        })
    )
}

На текущий момент меняет найденный инпут на 555 в рамках теста, который должен быть на самом деле event.target.value из инпута,чтобы число изменялось и перезаписывалось, что я сделать не могу одновременно с передачей id объекта.

Сам инпут: <input onChange={()=>OnChange(elem.id)} value={elem.name}/>

передает в коллбек функции Onchange айди текущего элемента (elem.id), но сюда-же мне нужно передать и сам event.target.value, чего я сделать не могу одновременно с передачей id. Любая передача двух параметров одновременно приводит к ошибке.

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

1 ответ 1

0

Нет никаких проблем в том, чтобы передавать в функции несколько параметров, если вы делаете все правильно. Достаточно в самой функции указать этот параметр и передать его.

function OnChange($event, id) { 
  ... 
}

<input onChange={($event)=>OnChange($event, elem.id)} value={elem.name}/>

Полный пример:

export default function App() {
  const [humans,setHumans] = React.useState([
    {id:1,name:"Антон"},
    {id:2,name:"Сергей"},
    {id:3,name:"Виктор"},
    {id:4,name:"Игорь"},
  ])

  function OnChange($event, id){
    setHumans(
      humans.map(elem=>{
        if(elem.id === id){
          elem.name = $event.target.value;
        }
        return elem
      })
    )
  }

  return (
    <div className='App'>
      {humans.map(elem => 
        <div>
          <input onChange={
            ($event)=>OnChange($event, elem.id)} value={elem.name}/>
        </div>
      )}
    </div>
  );
}
1
  • Спасибо! Вы решили мою проблему. 14 янв 2021 в 10:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.