如何从React中的儿童更改父状态？

Question

我想写一个四列有小编辑可能性的小用户列表。

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

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

父组件：

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方法将抛出一个错误：

Uncaught TypeError: this.setState is not a function

我在做什么错？

Answer 1

我看你用ES6，你应该在父元素的构造以下行：

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

Answer 2

您必须将this绑定到您的editUser方法。

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