Question

我有2个组件，一个父组件来管理状态以及许多其他事情，一个子组件带有一些reactstrap按钮单选按钮，我试图更改状态onClick在子按钮上，但是我得到了错误：这。 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>

        );
    }
}

反应按钮收音机this.setState不是一个函数

3 个答案: