javascript - 在纯 React 中将操作与状态更改联系起来

Question

学习 React 可能是一个有点菜鸟的问题。考虑这段代码:

class Application extends React.Component {
  render() {
    return <Container />
  }
}

class Container extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isOn: false
    }
    this.handleToggle = this.handleToggle.bind(this);
  }

  handleToggle(on) {
    this.setState({
      isOn: on
    });
  }

  render() {
    return ( 
      <div>
      <p>
        {this.state.isOn ? 'on' : 'off'}
      </p>
      <MyButton handleToggle={this.handleToggle} />
        </div>
    );
  }
}


class MyButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pressed: false
    }
    this.handleButtonToggle = this.handleButtonToggle.bind(this);
  }


  handleButtonToggle() {
    const on = !this.state.pressed
    this.setState({
      pressed: on
    });
    this.props.handleToggle(on);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleButtonToggle}>
          {this.state.pressed ? "pressed" : "depressed"}
        </button>
      </div>
    );
  }
}

ReactDOM.render(<Application />, document.getElementById('app'));

正如您当前所看到的，当单击容器内的按钮时，会触发handleButtonToggle()，这会更改按钮本身的状态，然后调用一个函数来更改父容器的状态。这是 React 的方式吗？目前，当函数 handleButtonToggle 被触发时，容器状态会发生变化。理想情况下，我希望容器状态直接依赖于 MyButton state (因为将来可能会有除了通过 handleButtonToggle 之外的方式设置按钮状态，但我不这样做)每次状态更改时都希望手动调用 this.props.handleToggle。)。换句话说，当按钮组件的状态发生变化时，有没有办法在按钮组件中执行类似 this.props.handleToggle(this.state.pressed) 的操作。

Codepen

Answer 1

查看代码后，编写 Button 组件的更好方法是使其成为受控组件。如果容器组件需要保持按下状态，受控按钮组件将从容器组件接收按下状态作为 props。

 <MyButton pressed={this.state.pressed} onToggle={this.handleToggle} />

Button组件的render方法应该是:

render() {
    return (
      <div>
        <button onClick={this.props.onToggle}>
          {this.props.pressed ? "pressed" : "depressed"}
        </button>
      </div>
    );
  }

实际的按钮切换将在容器组件的handleToggle方法中完成:

 handleButtonToggle() {
    let { pressed } = this.state;
    pressed = !pressed;
    this.setState({
      pressed
    });
  }