Javascript 如何从React中的子级更改父级状态？

我想写一个小的用户列表，其中有四列可以编辑

到目前为止，我一切顺利。在父组件中，我向状态中添加了一个对象，该对象包含一些虚拟用户数据。然后，我通过一个子组件呈现数据。在子元素中，我使用其状态将文本字段更改为输入字段

现在我想更改父对象的状态，以反映在输入字段中所做的更改

父组件：

editUser(username, firstName, lastName, email, createdAt, key) {
  this.setState({ // THIS LINE WILL THROW AN ERROR
    users[key]: {
      username: username,
      firstName: firstName,
      lastName: lastName,
      email: email,
      createdAt: createdAt
    }
  }); 
}

render() {
  return (
    <div>
      <table width="100%">
        <thead>
          <tr>
            ...
          </tr>
        </thead>
        <tbody>
          {_.map(this.state.users, (entry, key) => {
            return <UserEntry editUser={this.editUser} username={entry.username} firstName={entry.firstName} lastName={entry.lastName} email={entry.email} createdAt={entry.createdAt} key={key}/>
          })}
        </tbody>
      </table>
    </div>
  );
}

isEdit(e) {
  this.setState({ editable: true });
}

changeValue(username, firstName, lastName, email, createdAt, key) {
  this.setState({ editable: false });
  this.props.editUser(username, firstName, lastName, email, createdAt, key);
}

render() {
  const {username, firstName, lastName, email, createdAt} = this.props;
  if (this.state.editable) {
    return (
      <tr>
        <td><input type="text" defaultValue={username}/></td>
        <td><input type="text" defaultValue={firstName}/></td>
        <td><input type="text" defaultValue={lastName}/></td>
        <td><input type="text" defaultValue={email}/></td>
        <td><input type="text" defaultValue={createdAt}/></td>
        <td><button onClick={this.changeValue.bind(this, username, firstName, lastName, email, createdAt, this.props.key)} type="button" value="Ok">Ok</button></td>
      </tr>
    )
  } else {
    return (
      <tr>
        <td>{username}</td>
        <td>{firstName}</td>
        <td>{lastName}</td>
        <td>{email}</td>
        <td>{createdAt}</td>
        <td><input onClick={this.isEdit.bind(this)} type="button" value="Edit"/></td>
      </tr>
    )
  }
}

editUser（用户名、姓氏、姓氏、电子邮件、createdAt、密钥）{
this.setState（{//此行将抛出一个错误
用户[键]：{
用户名：用户名，
名字：名字，
lastName:lastName，
电邮:电邮,，
createdAt:createdAt
}
}); 
}
render（）{
返回(
...
{{{.map（this.state.users，（条目，键）=>{
返回
})}
);
}

子组件：

editUser(username, firstName, lastName, email, createdAt, key) {
  this.setState({ // THIS LINE WILL THROW AN ERROR
    users[key]: {
      username: username,
      firstName: firstName,
      lastName: lastName,
      email: email,
      createdAt: createdAt
    }
  }); 
}

render() {
  return (
    <div>
      <table width="100%">
        <thead>
          <tr>
            ...
          </tr>
        </thead>
        <tbody>
          {_.map(this.state.users, (entry, key) => {
            return <UserEntry editUser={this.editUser} username={entry.username} firstName={entry.firstName} lastName={entry.lastName} email={entry.email} createdAt={entry.createdAt} key={key}/>
          })}
        </tbody>
      </table>
    </div>
  );
}

isEdit(e) {
  this.setState({ editable: true });
}

changeValue(username, firstName, lastName, email, createdAt, key) {
  this.setState({ editable: false });
  this.props.editUser(username, firstName, lastName, email, createdAt, key);
}

render() {
  const {username, firstName, lastName, email, createdAt} = this.props;
  if (this.state.editable) {
    return (
      <tr>
        <td><input type="text" defaultValue={username}/></td>
        <td><input type="text" defaultValue={firstName}/></td>
        <td><input type="text" defaultValue={lastName}/></td>
        <td><input type="text" defaultValue={email}/></td>
        <td><input type="text" defaultValue={createdAt}/></td>
        <td><button onClick={this.changeValue.bind(this, username, firstName, lastName, email, createdAt, this.props.key)} type="button" value="Ok">Ok</button></td>
      </tr>
    )
  } else {
    return (
      <tr>
        <td>{username}</td>
        <td>{firstName}</td>
        <td>{lastName}</td>
        <td>{email}</td>
        <td>{createdAt}</td>
        <td><input onClick={this.isEdit.bind(this)} type="button" value="Edit"/></td>
      </tr>
    )
  }
}

isEdit（e）{
this.setState（{editable:true}）；
}
更改值（用户名、名字、姓氏、电子邮件、createdAt、密钥）{
this.setState（{editable:false}）；
this.props.editUser（用户名、名字、姓氏、电子邮件、createdAt、密钥）；
}
render（）{
const{username，firstName，lastName，email，createdAt}=this.props；
if（this.state.editable）{
返回(
好啊
)
}否则{
返回(
{username}
{firstName}
{lastName}
{email}
{createdAt}
)
}
}

父组件中的editUser方法将引发错误：

未捕获类型错误：this.setState不是函数

---

我做错了什么？

您必须将此绑定到您的editUser方法

return <UserEntry editUser={this.editUser.bind(this)} ...

---

return我看到您使用了ES6，您应该在父元素的构造函数中包含以下行：

constructor() {
  this.editUser = this.editUser.bind(this);
}