javascript - 在触发 onChange 时 react 仅更新列表的第一个元素

Question

我正在尝试构建一个带有输入字段的灵活列表，以便每当我在该输入字段中写入内容时它都会更改值。

像这样:

但是，无论我在哪个输入字段中输入，它都会单独更改第一个字段的唯一名称。

就像根据状态有 3 个输入字段和 3 个段落标签。我想更新输入字段上面的 p 标签(显示名称)onChange of input field.

我正在尝试使用 React hooks 实现这个功能。

这是我的代码:

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>
    );
}

Answer 1

您需要将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，初始状态应该如下所示

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