Question

我正在学习React，并且我开始提取组件。我理解如何在子组件上绑定像onClick之类的事件，但是孙子呢？

示例：

我有一个List组件。它有ListRow个孩子。在每个ListRow子项中，我有一个按钮组件，用于从父项（List). My thoughts are that the deleteRow click handler would be on the List component so that I could then set the state. However, I can't seem to find a way to call the grandparent's ( List`）eventHandler中删除该特定行。

<List /> // has event handler as well as state for the list items
    <ListRow />
        <DeleteButton /> //when clicking this i want to delete parent <ListRow />

我是否应该通过链接传递onclick？

Answer 1

你可以试试这个：

// grandparent function that goes into parent
heirloom() 
{
    console.log("grandparent says hi");
    //something happens
}

// everything else (put into all subsequent children)
heirloom()
{
    this.props.heirloom();
}

<List heirloom="this.heirloom">
    <ListRow heirloom="this.heirloom" />
        <DeleteButton onClick="this.heirloom"/>

我的语法可能已关闭，这可能会或可能不会奏效，我还没有机会与React玩一段时间。如果确实如此，太棒了！如果它没有，那就让希望有更好答案的人来到这里^^

Answer 2

创建组件时，您必须决定组件是功能组件还是需要管理状态的组件。这是一个例子，你有一个＆＃34;祖父母＆＃34;将功能传递给它的孩子和孩子传给它的孩子。如果一个组件不需要管理状态，那么你就可以使它成为一个功能组件＆＃34;喜欢＆＃34;父母＆＃34;和＆＃34;孩子＆＃34;以下示例：

class GrandParent extends Component {
  handleState = (obj) => {
    this.setState(obj);
  }

  render() {
    return (
      <Parent handleState={this.handleState} />
    );
  }
}

function Parent(props) {
  render() {
    return (
      <Child handleState={props.handleState} />
    );
  }
}
  function Child(props) {
    render() {
      return (
        ...
      );
    }
  }

您希望将其传递到您需要调用该函数的任何位置，您可以将其作为props.handleState()从您发送给它的任何组件中使用。

如何更改组件上的状态两级？

2 个答案: