React中如何修改组件状态？点击按钮切换状态的实现方法

嘿，刚接触React的话，这个需求其实很容易实现，我来给你拆解具体步骤，顺便帮你修正代码里的小问题～

步骤1：修正组件基础结构 #

你的原代码有两个小问题：render()方法没有正确闭合，而且通过script标签引入React的情况下，要使用React.Component而不是直接写Component，不然会触发未定义错误。

步骤2：添加事件处理函数并绑定this #

在类组件中，事件处理函数默认不会绑定组件的this，所以我们需要手动绑定，或者用箭头函数定义方法（后者更简洁）。这里提供两种方式：

方式一：在constructor中绑定this

constructor(props){
  super(props);
  this.state = { clicked_status:false }
  // 绑定事件处理函数的this，确保函数内部能访问到组件实例
  this.handleButtonClick = this.handleButtonClick.bind(this);
}

handleButtonClick() {
  // 使用setState更新状态，这是React官方推荐的状态更新方式
  this.setState({ clicked_status: true });
}

方式二：用箭头函数定义方法（更简洁）

constructor(props){
  super(props);
  this.state = { clicked_status:false }
}

// 箭头函数会自动绑定当前组件的this
handleButtonClick = () => {
  this.setState({ clicked_status: true });
}

步骤3：给按钮添加点击事件 #

找到你的「Sign Up」按钮，给它加上onClick属性，把我们写好的处理函数传进去（注意不要加括号，加括号会导致组件渲染时就执行函数）：

<button 
  type="submit" 
  id="submit" 
  className="button7 btn mt-10 bckgrnC"
  onClick={this.handleButtonClick}
>
  Sign Up
</button>

完整的修正后代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<script type="text/babel">
class Static extends React.Component{
  constructor(props){
    super(props);
    this.state = { clicked_status:false }
    this.handleButtonClick = this.handleButtonClick.bind(this);
  }

  handleButtonClick() {
    this.setState({ clicked_status: true });
    // 可以打印状态验证更新结果（注意：setState是异步的，这里可能打印旧值，要验证的话用回调）
    this.setState({ clicked_status: true }, () => {
      console.log('点击后的状态:', this.state.clicked_status);
    });
  }

  render(){
    return(
      <div className="input-group mb-3 topA">
        <input className="input2" id="name" type="text" placeholder=" Name "/><br/>
        <input className="input2 mt-10" id="mail" type="text" placeholder=" Email "/><br/>
        <input className="input2 mt-10" id="passwrd" type="password" placeholder=" Password "/><br/>
        <span id="error_passwrd" className="text-danger fs12"></span>
        <input className="input2 mt-10" id="cpassword" type="password" placeholder=" Confirm Password "/><br/>
        <span id="error_cpassword" className="text-danger fs12"></span>
        <a >
          <button 
            type="submit" 
            id="submit" 
            className="button7 btn mt-10 bckgrnC"
            onClick={this.handleButtonClick}
          >
            Sign Up
          </button>
        </a>
      </div>
    )
  }
}

// 别忘了把组件渲染到DOM节点上
ReactDOM.render(<Static />, document.getElementById('root'));
</script>
<div id="root"></div>

额外小提示 #

• 永远不要直接修改this.state，比如this.state.clicked_status = true，这种方式不会触发组件重新渲染，必须用this.setState()来通知React状态变化。
• 如果需要在状态更新完成后执行逻辑，可以给setState传第二个参数（回调函数），就像上面代码里的打印逻辑那样。

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