反应按钮单选 this.setState 不是函数

Question

我有 2 个组件，一个父组件来管理状态和许多其他事情，还有一个带有一些 reactstrap 按钮单选的子组件，我正在尝试更改子按钮上的 onClick 状态，但出现错误：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;

有没有人可以指出我正确的方向，我猜我忘了绑定一些东西......

Answer 1

问题是，当您使用非匿名函数时，this 会被覆盖，并且不会再引用该组件。由于您已经在使用 class properties，因此简单的解决方法是继续使用箭头函数，以保持 this 引用组件：

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

参见this medium article 中的#5，它解释了绑定this 以保持它引用组件的不同方式。

Answer 2

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

用于救援的箭头函数。

Answer 3

你应该像这样绑定你传递的函数：

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>

        );
    }
}