Question

我有个人组件，带有此源代码。

const person = props => {
  return (
    <div>
      <p onClick={props.click}>
        I'm {props.name} and I am {props.age} years old!
      </p>
      <p>{props.children}</p>
      <input type="text" onChange={props.changed} />
    </div>
  );
};

这个想法是我希望输入文本更新我的app.js文件中人员组件的名称。

在这里，我制作了一个名为nameChangedHandler的函数，以实际更改名称（首先，我只针对我的人员数组中的第二个对象）。

nameChangedHandler = event => {
  this.setState({
    persons: [
      { name: "Kris", age: 22 },
      { name: event.target.value, age: 24 },
      { name: "Jenna", age: 29 }
    ]
  });
};

在我的render方法中，我添加了一个名为change的变量，在这里我调用this.nameChangedHandler来更改第二个人对象的名称

<Person
  name={this.state.persons[1].name}
  age={this.state.persons[1].age}
  click={this.switchNameHandler.bind(this, "Kris!")}
  changed={this.nameChangedHandler}
>
  My hobbies: Racing
</Person>;

每当我在输入字段中键入一些数据时，这都不会更改人员的姓名吗？

React -JS事件处理程序不更新组件

0 个答案: