从子级响应父级访问状态

React parent access state from child

提问人：user3075373 提问时间：7/9/2016 最后编辑：joe_younguser3075373 更新时间：3/26/2018 访问量：1486

问：

如何在 React 中显示父项中子项的状态？

var Form = React.createClass({
    render: function() {
        return (
        <form>
            <h1>***CHILD STATE CHECKED***</h1>
            {this.props.children}
        </form>
        )
    }
})

var Checkbox = React.createClass({
    getInitialState: function() {
        return {
            checked: true
        }   
    },

    toggle: function() {
        this.setState({
            checked: !this.state.checked
        });
    },

    render: function() {
        return (
            <div onClick={this.toggle} aria-checked={this.state.checked} role="checkbox"></div>
        );
    }
})

ReactDOM.render(
    <Form>
        <Checkbox />
    </Form>,
    document.querySelector('#app')
);

在其父组件中显示子项状态的最佳方法是什么（尤其是在父组件中的此标记内）？ 没有“丑陋的伎俩”，这可能吗？
我想在选中复选框时将一些节点或其他组件添加到表单中。

JavaScript ReactJS 响应式编程

评论

0赞 Pierre Criulanscy 7/9/2016
你到底想达到什么目的？显示是否选中了您写的位置？<Checkbox/>***CHILD STATE CHECKED***
0赞 user3075373 7/9/2016
是的，我想从此文本中的复选框（state.checked）显示状态** *CHILD STATE CHECKED***
0赞 Pierre Criulanscy 7/9/2016
您只想在表单中只有一个复选框，还是为了示例？
0赞 user3075373 7/9/2016
我想在 Form 组件中动态添加一个组件，然后从 Parent 中的这个子组件中访问一些值（例如状态）
0赞 Pierre Criulanscy 7/9/2016
好吧，你为什么要这样做？

答：

1赞 Jagadish Upadhyay 7/9/2016 #1

不要在复选框中调用切换。将回调从 Form 类传递到 CheckBox 类。

在表格类中：

return(
        <CheckBox onClick={this.onClick} />
)

    onClick(){
        console.log('Checkbox clicked');
    }

在 CheckBox 类中：

    <div onClick={this.props.onClick} aria-checked={this.state.checked} role="checkbox">

在父类中管理状态，而不是在子类中管理状态。

0赞 Nesha Zoric 3/26/2018 #2

尽管如果在父级状态中管理此 CheckBox 状态的答案是正确的，但在一些更复杂的情况下，您可能仍然需要将状态从子级传递给组件： 概念类似，您需要将一个函数从父级传递给子级，该函数将像回调一样使用，您将在其中处理该子项的状态：

var Form = React.createClass({
    handleChildStateChange: function(newChildState) {
        // handle the child state change here
    }

    render: function() {
        const updatedChildren = React.Children.map(this.props.children,
            (child) => {
                return React.cloneElement(child, { updateParent: this.handleChildStateChange });
        });
        return (
            <form>
                <h1>***CHILD STATE CHECKED***</h1>
                {updatedChildren}
            </form>
        )
    }
})

然后，在更新子组件中的状态时，调用传递的函数，并将 new state 作为参数（由于状态的异步性质，我在这里使用函数 setState）：

var Checkbox = React.createClass({
    getInitialState: function() {
        return {
            checked: true
        }   
    },

    toggle: function() {
        this.setState((state) => {
            state.checked = !state.checked;
            this.props.updateParent(state);
            return state;
        });
    },

    render: function() {
        return (
            <div onClick={this.toggle} aria-checked={this.state.checked} role="checkbox"></div>
        );
    }
})

最后，您使用的渲染保持不变：

ReactDOM.render(
    <Form>
        <Checkbox />
    </Form>,
    document.querySelector('#app')
);

如果您想了解更多关于将道具从孩子传给父母的信息，这篇文章可能会有所帮助。

上一个：ASP.NET AJAX PUT 方法不允许和未经授权

下一个：从 WebBluetooth 读取浮点值 characteristic.readValue（）