onclick 改变另一个元素状态的元素

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

onclick 改变另一个元素状态的元素

Onclick an element that changes the state of another element

onclick

event-handling

setstate

reactjs