Question

我试图点击一个排序图标，触发更改列表的顺序。

为了让它更简单，让我们说你有一个按钮和另一个按钮，它们在彼此不同的div上。

<div>
    //Button 1
    <button onclick={"some_click_handler"}>
</div>

<div>
    //Button 2
    <button>
        {this.state.someToggle ? true : false}
    </button>
</div>

Answer 1

创建一个将回调传递给按钮的组件，此回调将更新容器的状态，容器将依次设置列表的道具。这在React中非常常见，并且是组合模式如何工作的基础。如果需要在两个组件之间共享数据，只需将它们放入容器中，然后将状态提升到父组件即可。这些组件通常称为容器，并且有大量文档。

这是一个很好的起点：https://reactjs.org/docs/lifting-state-up.html

像这样......

class Container extends React.Component {
  constructor(props) {
    super(props);

    // Don't forget to bind the handler to the correct context
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(sort) {
    this.setState({sort: sort});
  }

  render() {
    return (
      <Button handleClick={this.handleClick} />
      <List sort={this.state.sort} />
    )
  }
}

单击一个可更改另一个元素状态的元素

1 个答案: