Блог

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

Вот так:

Но, в каком бы поле ввода я ни вводил, оно изменяет только имя только первого поля.

Например, есть 3 поля ввода и 3 тега абзаца в зависимости от состояния. Я хочу обновить тег поля ввода выше p (отображающий имя) при изменении поля ввода.

Я пытаюсь реализовать эту функцию с помощью реактивных перехватов.

Вот мой код:

App.js

 const initialPersonState = [
    {name:"Vivank",age:"21"},
    {name:"Shubham",age:"18"},
    {name:"Max",age:"16"},
  ]

  const [personState, setPersonState] = useState(initialPersonState)
const inputChangeHandeler = (event,id) => {
    const personIndex = personState.findIndex(p =>{
      return p.id === id
    })

    const person = {
      ...personState[personIndex]
    }

    person.name = event.target.value

    const persons = [...personState]
    persons[personIndex] = person

    setPersonState(persons)
  }

person = (
      <>
        {personState.map((person,index)=>{
          return <Person 
          name={person.name}
          age={person.age}
          delete={() => deletePerson(index)}
          key={person.id}
          change={(event)=>inputChangeHandeler(event,person.id)}
          />
        })

        }
      </>
  

Person.js

 const person = (props) => {
    return(
        <div>
            <p onClick={()=>props.click("Max!")}>Hello my name is {props.name} and I'm {props.age} years old</p>
            <p>{props.children}</p>
            <p onClick={props.delete}>Delete person</p>
            <input type="text" onChange={props.change}></input>
        </div>
    );
}
  

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

 const person = (props) => {
    return(
        <div>
            <p onClick={()=>props.click("Max!")}>Hello my name is {props.name} and I'm {props.age} years old</p>
            <p>{props.children}</p>
            <p onClick={props.delete}>Delete person</p>
            <input type="text" value={props.name} onChange={props.change}></input>
        </div>
    );
}
  

Кроме того, вы не определили id внутренние объекты person info, начальное состояние должно выглядеть так

 const initialPersonState = [
    {id: 1, name:"Vivank",age:"21"},
    {id: 2, name:"Shubham",age:"18"},
    {id: 3, name:"Max",age:"16"},
  ];