Question

我的React组件中有以下代码：

class TheComponent extends Component{

    constructor(props) {

        super(props);

        this.state = {
            a: '',
            b: ''
        };
    }

    output = (data) => {

        this.setState({
            a: data.a,
            b: data.b
        });
    }

    render(){
        return(<ChildrenComponent outputValues={this.output.bind(this)}/>);
    }
}

当我从同一组件调用output方法时，它运行良好，状态成功更改。但是当我从ChildrenComponent调用它时，它不起作用，状态也不会改变。

因此，我将以下代码添加到output函数中，以了解发生了什么：console.log(this.setState)。结果是“ setState”功能在那里。

因此，如果功能setState已正确绑定到output，为什么它不起作用？为什么只有在从当前组件调用输出时，它才起作用？”

Answer 1

您的代码对我来说看起来不错。我认为您对setState的功能感到有些困惑。 setState是内置的React函数，因此运行console.log(this.setState)将始终记录一个函数，尤其是该函数。

我不确定您如何在子组件中调用prop，但是下面的示例允许子组件将父状态设置为data函数{{ 1}}，并将父状态记录到控制台。

render

return

setState函数不适用于子组件

1 个答案: