React组件按钮onClick行存在什么错误？点击无法显示X

你的代码里，Square组件按钮的onClick属性直接执行了this.setState({value: 'X'})，这是核心错误：

• React的事件处理属性（比如onClick）需要接收一个函数引用，而不是直接执行函数。你现在的写法会在组件首次渲染时就立刻调用setState，而不是等到按钮被点击时才触发。
• 这会导致组件渲染时就把value设为'X'，但后续点击按钮时，因为onClick的值是setState执行后的返回值（undefined），所以点击不会有任何反应。

修正方法有两种，任选其一即可：

方法1：用箭头函数包裹setState #

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }
  render() {
    return (
      <button className="square" onClick={() => this.setState({value: 'X'})}>
        {this.state.value}
      </button>
    );
  }
}

方法2：定义类方法并绑定this（性能更优） #

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
    // 在构造函数中绑定this指向
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({value: 'X'});
  }

  render() {
    return (
      <button className="square" onClick={this.handleClick}>
        {this.state.value}
      </button>
    );
  }
}

修改后，点击按钮时才会触发setState更新value，方块就能正确显示'X'了。

内容的提问来源于stack exchange，提问作者user18577499