如何用事件设置状态？ [复制]答案

【问题标题】：How set state with events? [duplicate]如何用事件设置状态？ [复制]
【发布时间】：2018-06-03 09:02:57
【问题描述】：

我想在点击按钮后设置状态。但我有这个错误：

类型错误：这是未定义的

class Welcome extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            name: 'David'
        };
    }

    btnClick(){
        this.setState({name: 'Sarah'});
    }

    render(){

        return(
            <div>
                <button onClick={this.btnClick}>Change Name</button>
                <h1>{this.state.name}</h1>
            </div>
        );

    }

}

改变 React 状态的正确方法是什么？

【问题讨论】：

你需要在构造函数中绑定btnClick。 this.btnClick = this.btnClick.bind(this);

标签： reactjs ecmascript-6

【解决方案1】：

看看这个，需要在构造函数中绑定方法，也可以使用箭头函数。

https://reactjs.org/docs/handling-events.html

【讨论】：

【解决方案2】：

您需要将处理程序绑定到class 的实例。

要么在构造函数中显式执行：

constructor(props){
  super(props);
  this.state = {
    name: 'David'
  };
  this.btnClick = this.btnClick.bind(this);
}

运行代码示例：

class Welcome extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      name: 'David'
    };
    this.btnClick = this.btnClick.bind(this);
  }

  btnClick(){
    this.setState({ name: 'Sarah' });
  }

  render() {

    return (
      <div>
        <button onClick={this.btnClick}>Change Name</button>
        <h1>{this.state.name}</h1>
      </div>
    );

  }

}

ReactDOM.render(<Welcome />, document.getElementById('root'));

<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>
<div id="root"></div>

或者使用以词法方式使用this引用的箭头函数：

  btnClick = () => {
    this.setState({ name: 'Sarah' });
  }

运行代码示例：

class Welcome extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      name: 'David'
    };
  }

  btnClick = () => {
    this.setState({ name: 'Sarah' });
  }

  render() {

    return (
      <div>
        <button onClick={this.btnClick}>Change Name</button>
        <h1>{this.state.name}</h1>
      </div>
    );

  }

}

ReactDOM.render(<Welcome />, document.getElementById('root'));

<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>
<div id="root"></div>

【讨论】：

【解决方案3】：

你需要像这样在构造函数中绑定方法

constructor(props){
        super(props);
        this.state = {
            name: 'David'
        };
        this.btnClick = this.btnClick.bind(this)
    }

或者你也可以使用箭头函数语法

   btnClick = () => {
        this.setState({name: 'Sarah'});
    }

【讨论】：