RadioButton click TypeError: Cannot read property 'setState' of undefined

Question

我正在尝试根据单击的单选按钮设置状态。

我的代码：

import React, { Component } from 'react';

 class MyApp extends Component {

    state={
        name: "SomeName",
        radio: "some"
        }

    onRadioChange(e) {
        this.setState({name:"New Name"});

        // this.setState({
        //  [e.target.name]: e.target.value;
        // })
    }

    render() {

        return (
            <div style={{marginBottom:"50px"}}>
                <input type="radio"     onChange = {this.onRadioChange}
                             value="JonSnow"
                             name="radio1" />
                <label>JonSnow</label>

                <input type="radio"   onChange = {this.onRadioChange}
                             value="Cleopatra"
                             name="radio1"/>
                <label>Cleopatra</label>

            </div>
        );
    }
}

export default MyApp;

每当我点击单选按钮时，我都会得到一个错误：

TypeError: Cannot read property 'setState' of undefined

我做错了什么？

Answer 1

为了使用this关键字，您需要绑定方法。或者作为解决方法，您可以使用 arrow function。

像这样：

onRadioChange = (e) => {
        this.setState({name:"New Name"});

        // this.setState({
        //  [e.target.name]: e.target.value;
        // })
    }

Answer 2

这里有两种选择。使用箭头函数或将函数绑定到构造函数中的 this 。

为什么不起作用？

这是因为要在任何地方使用 setState，您必须有权访问 this。

箭头函数不需要显式绑定到 this，因为这是实现您想要的目标的较短选择。（他们预先绑定到this）。

第一个选项：

onRadioChange = (e) => {
  this.setState({ name: 'newName' });

}

第二个选项：

class MyApp extends React.Component {
   constructor(props) {
      super(props);
      this.onRadioChange = this.onRadioChange.bind(this);
   };
}

RadioButton click TypeError: Cannot read property 'setState' of undefined

RadioButton click TypeError: Cannot read property 'setState' of undefined

reactjs

react-state