React 按钮单选按钮 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>

        );
    }
}

React 按钮单选按钮 this.setState 不是函数

React button radio this.setState is not a function

javascript

binding

reactjs

reactstrap