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

Posted 2023-02-21

【中文标题】如何用事件设置状态？ [复制]

【英文标题】：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);

【参考方案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');