Question

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

TypeError：这是未定义的

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状态的正确方法是什么？

Answer 1

您需要在构造函数中绑定方法，如此

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

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

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

Answer 2

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

要么在构造函数中显式：

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

运行代码示例：

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

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

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

运行代码示例：

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

Answer 3

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

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

如何设置状态与事件？

3 个答案: