reactjs - 单选按钮单击类型错误：无法读取未定义的属性“setState”

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