React.js渲染与事件处理问题：点击按钮状态不更新求解

嘿，作为React新手遇到这个问题太正常啦，我来给你捋清楚原因和解决办法～

问题原因 #

你现在直接修改了组件实例的普通属性this.selected，但React无法感知到普通属性的变化，所以不会触发组件的重新渲染（也就是不会重新调用render方法），这就导致按钮上的文本一直停留在初始的false。

React组件的规则是：只有当state（组件内部状态）或者props（父组件传入的属性）发生变更时，才会自动触发重渲染，更新UI。

正确的实现示例 #

我们需要把selected改成组件的state属性，并用this.setState()方法来更新它，这样React就能感知到状态变化并更新UI了：

class Test extends React.Component {
  constructor(props) {
    super(props);
    // 初始化组件内部状态
    this.state = {
      selected: false
    };
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    // 必须用setState更新状态，不能直接修改this.state
    this.setState({
      selected: true
    });
  }
  
  render(){
    // 从state中读取用于渲染的值
    return <button onClick={this.handleClick}>{this.state.selected.toString()}</button>;
  }
}

ReactDOM.render( <Test/>, document.getElementById('container') );

额外小提示 #

• 类组件里永远不要直接修改this.state（比如this.state.selected = true），必须通过this.setState()方法来更新，这样React才能正确处理状态变更、触发重渲染流程。
• 如果你之后接触函数组件，会用到useState钩子来管理状态，核心逻辑和类组件的state是一致的——都是让React能感知到数据变化从而更新UI。

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