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

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} />
    )
  }
}