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

时间:2019-01-01 19:04:31

标签: reactjs

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

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

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

1 个答案:

答案 0 :(得分: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远不止于此