ReactJs-将函数作为道具传递给setState-哪个组件的状态将被更新？

Question

假设您有一个定义方法的父组件：

    class Parent extends Component {
     handleX() {
       this.setState({ x: true });
     }
   }

如果我将此功能作为道具传递给Child并调用它（例如单击按钮），则会更新哪个状态-Child或Parent？正确的使用方法是什么？

Answer 1

都不是。如果要更新父状态，则需要对其进行硬绑定或将其更改为公共类字段（handleX = () => { this.setState({ x: true })}）。但是由于this的工作原理，您将无法更新子状态。

handleX = () => {
  this.setState({ x: true })
}

或

<Child handleX={handleX.bind(this)} />

或

<Child handleX={() => handleX()} />

如果您想详细了解this在JS中的工作原理，请参考this question或在Google上进行搜索，这里有大量的文章。就我个人而言，我发现Kyle的You don't know JS - This and object prototypes远不止于此