如何在其他地方使用变量的当前值？

Question

我通过创建两个处理程序来动态更改名称和年龄。当我输入年龄时，它会动态变化。这里没有问题。但是这个名字也默认了。因为我将它定义为“ageChangeHandler”中的硬编码值。但我希望名称保持与“nameChangeHandler”中的相同。 Javascript/ES6 中是否有类似“currentValue”或“lastValue”的东西？ 我希望我解释得当。 提前致谢。

我找不到像 currentvalue 等任何选项。

    nameChangeHandler = (event) =>{ 
this.setState({
  persons: [
    {name: "Max" , age: 28},
    {name: event.target.value, age: 29},
    {name:"Arthur", age:34}
  ]
})

}

ageChangeHandler = (event) =>{
this.setState({
  persons:[
    {name: "Max" , age: 28},
    {name: "Tom", age: 29},
    {name:"Arthur", age:event.target.value}
  ]
})}

我调用处理程序的行：

<Person 
      name={this.state.persons[0].name} 
      age={this.state.persons[0].age}/>
    <Person 
      name={this.state.persons[1].name} 
      age={this.state.persons[1].age}
      click={this.switchNameHandler.bind(this, "Way 2")}
      Namechanged={this.nameChangeHandler}>My hobbies: coding</Person>
    <Person 
      name={this.state.persons[2].name} 
      age={this.state.persons[2].age}
      Agechanged={this.ageChangeHandler}/>

Answer 1

如果你将一个函数而不是一个对象传递给 setState，你会得到这个签名：

this.setState((prevState, props) => {
 // do something with prevState
 return { ...prevState }
});

允许您使用之前的状态来创建新的状态。

所以在你的情况下：

this.setState(prevState => {
  return {
      ...prevState,
      persons: prevState.persons.map(person => {
        if (person.name === "Arthur") return { ...person, age: e.target.value }
        return person
     })
  }
})

或类似的东西。

Answer 2

您可以使用索引来动态选择要编辑的用户，然后只更新其属性：

nameChangeHandler = (event) => {
   const { index } = this.state;
   this.setState({
     persons: this.state.persons.map((item, j) => {
        if (j === index) {
           return {
              ...item,
              name: event.target.value,
           };
        } else {
           return item;
        }
     }),
   });
}

您还可以创建一个通用函数来更新任意数量的参数：

<input
    type="text"
    // Here we send a value, n index (can be from state) and the parameter to update
    onChange={(e) => { this.changeHandler(e.target.value, 0, 'name') }}
/>

changeHandler = (value, index, attr) => {
    // index is the object in the array that we want to update 
    // attr is the key
   this.setState({
     persons: this.state.persons.map((item, j) => {
        if (j === index) {
           return {
              ...item,
              [attr]: value,
           };
        } else {
           return item;
        }
     }),
   });
}

Answer 3

为所有人声明了一个 ID：

state = {
persons: [
  {id:"25343", name:"Max", age: 28},
  {id:"24323ad ", name: "Tom", age: 29},
  {id:"asdavd231", name:"Arthur", age:34}
],

用他们的 ID 更新了他们：

  ageChangeHandler = (event,id) =>{
const personIndex = this.state.persons.findIndex(p=>{
  return p.id === id;
})
const person = {
  ...this.state.persons[personIndex]
}
person.age = event.target.value;
const persons = [...this.state.persons]
persons[personIndex] = person;
this.setState({persons:persons})}

在地图中渲染它们：

<div>
      {this.state.persons.map((person,index)=>{
        return <Person 
        click={() => this.deletePersonHandler(index)} //map'ten gelen index deletePersonHandler'a pareametre olarak gönderiliyor
        name={person.name} //map'in 1.parametresi. (persons'u işaret ediyor)
        age={person.age}
        key={person.id}
        nameChanged={(event)=>this.nameChangeHandler(event,person.id)}
        ageChanged={(event)=>this.ageChangeHandler(event,person.id)}/>
      })}

    </div>