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关键字，您需要 bind 方法。或者，可以使用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单击TypeError：无法读取未定义的属性'setState'

2 个答案: