Javascript React单选按钮this.setState不是一个功能

我有两个组件，一个用于管理状态和许多其他内容的父组件和一个带有一些reactstrap按钮的子组件单选按钮我试图在单击子按钮时更改状态，但我得到错误：this.setState不是一个函数，我无法找出代码的错误=>

//Parent
import React, { Component } from 'react';
import BtnRadio from './btnToggle';


class parent extends Component {

    state = {
        rSelected: true,
    }

    onRadioBtnClick(rSelected) {
        this.setState({ 
            rSelected:rSelected 
        });
    }

    render(){
        return (

            <div>
                <BtnToggle onRadioBtnClick={this.onRadioBtnClick} active={this.state.rSelected}/>
            </div>

        );
    }
};

export default AddAdmin;

//Chlid

import React from 'react';
import { Button, ButtonGroup } from 'reactstrap';

const BtnRadio = (props) => {

    return (
        <ButtonGroup>
            <Button color="light" onClick={() => props.onRadioBtnClick(true)} active={props.active === true}>Enable</Button>
            <Button color="light" onClick={() => props.onRadioBtnClick(false)} active={props.active === false}>Disabled</Button>
        </ButtonGroup>     
    );
};

export default BtnRadio;

---

有没有人能给我指出正确的方向我想我忘了绑定一些东西了…

问题是，当你使用非匿名函数时，它会被覆盖，不再引用组件。由于您已经在使用，简单的修复方法是继续使用箭头函数，以保持引用组件：

onRadioBtnClick = (rSelected) => {
    this.setState({ 
        rSelected:rSelected 
    });
}

请参见中的5，其中解释了绑定此文件以使其引用组件的不同方式

  <BtnToggle onRadioBtnClick={() => this.onRadioBtnClick()} active={this.state.rSelected}/>

---

用于救援的箭头功能。

您应该像这样绑定您通过的功能：

class parent extends Component {

    state = {
        rSelected: true,
    }

    onRadioBtnClick(rSelected) {
        this.setState({ 
            rSelected:rSelected 
        });
    }

    render(){
        return (

            <div>
                <BtnToggle onRadioBtnClick={this.onRadioBtnClick.bind(this)} active={this.state.rSelected}/>
            </div>

        );
    }
}

或者，您可以在将函数传递到构造函数之前绑定它们：

class parent extends Component {

    state = {
        rSelected: true,
    }

    constructor() {
        super()

        this.onRadioBtnClick = this.onRadioBtnClick.bind(this)
    }

    onRadioBtnClick(rSelected) {
        this.setState({ 
            rSelected:rSelected 
        });
    }

    render(){
        return (

            <div>
                <BtnToggle onRadioBtnClick={this.onRadioBtnClick} active={this.state.rSelected}/>
            </div>

        );
    }
}

---

OP已经在使用类属性查看他的状态，因此没有什么理由不继续使用类属性，以避免将匿名函数附加到每个组件的性能下降。有关更多信息，请参见。@Ukaszblaszyskyński供参考：您所建议的内容甚至还不在ES中，而是建议。不知道为什么这个答案会被否决。虽然箭头函数更优雅，但这个答案更正确一点。@Solo主要原因是，OP已经证明他已经在使用类属性了。没有理由向该组件添加构造函数，从而使事情复杂化，特别是当向该组件传递道具时。@FrankerZ对不起，您能链接到一些文档或详细说明一下吗？我不明白这会使事情复杂化。谢谢@Smarticles101不会让事情复杂化，只是更烦人，更容易忘记。但是你不应该得到这些反对票。好吧，那只是个人喜好的问题，谢谢