问

javascript - react里面同级组件之间如何通信？

曾经沧海难为水文杰59552066 发布于 2022-11-10 20:12

就是比如有一个按钮和一个表格，选中表格中checkbox的项，然后点击按钮会删除这几项，表格和按钮分别是两个组件，那么点击按钮的时候，如何获取选中的数据？？

5 个回答

不用考虑这两个子组件的通信
checkbox组件选择保存数据
按钮组件删除数据
父组件保存这些数据
子组件调用即可

2022-11-12 01:51 回答

77阿建

class Parent extends React.Component{
    ...
    this.state = {
        dataA:1
    };
    ...
    render(){
        return (
            <p>
                <ChildrenA  onDataChange={data=>this.setState({dataA:data})}/>
                <ChildrenB data={this.state.dataA}/>
            </p>
        )
    }
}

class ChildrenA extends React.Component{
    render(){
        return (
            <p onClick={e=>this.props.onDataChange(2)}>click</p>
        )
    }
}
ChildrenA.propTypes = {
    onDataChange:React.PropTypes.func
};
class ChildrenB extends React.Component{
    render(){
        return (
            <p>{this.props.data}</p>
        )
    }
}
ChildrenB.propTypes = {
    data:React.PropTypes.number
};

2022-11-12 01:51 回答

轩楼妈

react子组件传递数据给父组件
父组件嵌套子组件，父组件的处理函数通过属性的方式赋值组子组件（
<GenderSelect handleSelect={this.handleSelect}></GenderSelect>
），子组件通过触发事件，委托调用父组件的处理函数，从而实现把值传给父组件（return <select onChange={this.props.handleSelect}>，
handleSelect: function(event) {
this.setState({gender: event.target.value})
}
）

找的例子

2022-11-12 01:51 回答

Larry_He
你可以设计成，表格与按钮中的数据都是通过父组件设置他们props进行传递的，删除动作发送消息给父组件，由父组件进行删除，就能达到数据同步

2022-11-12 01:51 回答

钧广摄影__

提供几个思路：
1.子A -> 父 -> 子B

表格组件告诉父组件那几项被勾选了，父组件再告诉按钮组件那几项被勾选了

2.pub、sub模式

当表格组件勾选时，消息通知按钮组件那几项被勾选了

3.引入redux

建立一个全局的store，从store里面获取