如何從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)} ...