Javascript reactjs组件通信

我创建了两个单独的组件和一个父组件。我试图看看我如何连接他们，这样当他们的复选框被取消选中时，我可以让孩子们的下拉列表消失。我想这可能是我造成的，所以这两个组件无法通信，但我想看看是否有办法让它们通信。一直在尝试不同的方法，但似乎无法找到答案

这是父组件。它从一些数据构建部分，并呈现一个复选框树视图，其中第一个（父）复选框有一个下拉列表。在该下拉列表中选择第三个选项时，它将在每个子项的下拉列表中呈现复选框。我试着看看当复选框被取消选中时，我是否可以让子下拉列表消失，但我似乎无法让这两个组件进行通信。

导出默认类CheckboxGroup扩展PureComponent{
静态类型={
数据：PropTypes.any.isRequired，
onChange:PropTypes.func.isRequired，
计数器：PropTypes.number，
};
mapParents=（计数器，子项）=>(

{child.get（'items'）&&this.buildTree（child.get（'items'），counter+child.get（'name'））}

)
mapDataArr=（计数器）=>（子项）=>(
（计数器===0 | |计数器===1000）？
此.mapParents（计数器、子项）
:

{child.get（'items'）&&this.buildTree（child.get（'items'），counter+child.get（'name'））}

)
buildTree=（数据阵列，计数器）=>(

{dataArr.map（this.mapDataArr（计数器））}

)
render（）{
返回(
{this.buildTree（this.props.data，this.props.counter）}
);
}
}

您可以在状态中将

名称属性设置为相应的属性，以便处理程序可以通过事件参数获取列表/输入的名称，并分别设置状态。
然后，您可以根据状态有条件地呈现

下拉列表。

以下是此类行为的一个小例子：


const列表=[
[
{值：“0”，文本：“im 0”}，
{值：“1”，文本：“im 1”}，
{值：“2”，文本：“IM2”}
],
[
{值：“a”，文本：“im a”}，
{值：“b”，文本：“im b”}，
{值：“c”，文本：“im c”}
]
];
常量下拉列表=（{options}）=>{
返回(
{options.map（opt=>{opt.text}）}
);
};
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
showList0:false，
showList1：对
};
this.toggleCheck=this.toggleCheck.bind（this）；
}
切换检查（e）{
const listName=e.target.name；
this.setState（{[listName]：！this.state[listName]}）；
}
render（）{
返回(
{lists.map（（o，i）=>{
const listName=`showList${i}`；
const shouldShow=this.state[listName]；
返回(
{shouldShow&}
);
})}
);
}
}
render（，document.getElementById（“根”））

您可以在状态中将
名称属性设置为相应的属性，以便处理程序可以通过事件参数获取列表/输入的名称，并分别设置状态。

然后，您可以根据状态有条件地呈现
下拉列表。

以下是此类行为的一个小例子：


const列表=[
[
{值：“0”，文本：“im 0”}，
{值：“1”，文本：“im 1”}，
{值：“2”，文本：“IM2”}
],
[
{值：“a”，文本：“im a”}，
{值：“b”，文本：“im b”}，
{值：“c”，文本：“im c”}
]
];
常量下拉列表=（{options}）=>{
返回(
{options.map（opt=>{opt.text}）}
);
};
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
showList0:false，
showList1：对
};
this.toggleCheck=this.toggleCheck.bind（this）；
}
切换检查（e）{
const listName=e.target.name；
this.setState（{[listName]：！this.state[listName]}）；
}
render（）{
返回(
{lists.map（（o，i）=>{
const listName=`showList${i}`；
const shouldShow=this.state[listName]；
返回(
{shouldShow&}
);
})}
);
}
}
render（，document.getElementById（“根”））
您可以做的是设置两个道具发送到子组件以重新渲染它们

示例

   export default class CheckBoxComponent extends React.Component {
       changeInput() {
          this.props.onCheckedChanged();
       }

       render() {
         return(
           <div className='permission-item'>
            <div className='ui checkbox'>
              <input type='checkbox' onChange={this.changeInput} ref={this.getRef}/>
              <label onClick={this.changeInput.bind(this)} style={pointer}>
                {label}
              </label>
            </div>
          </div>
         )
       }
   }

   export default class DropDownComponent extends React.Component {
       renderSelect() {
         // here render your select and options
       }
       render() {
         return(
           <div>
             {this.props.checkboxChecked === false ? this.renderSelect : null}
           </div>
         )
       }
   }

    export default class App extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                checkboxChecked: false
            };
        }
        onCheckedChanged() {
          this.setState({ checkboxChecked: !this.state.checkboxChecked });
        }
        render() {
            return(
                <div>
                    <CheckBoxComponent onCheckedChanged={this.onCheckedChanged.bind(this)} />
                    <DropDownComponent checkboxChecked={this.state.checkboxChecked} />
                </div>
            )
        }
    }

导出默认类CheckBoxComponent扩展React.Component{
changeInput（）{
this.props.onCheckedChanged（）；
}
render（）{
返回(
{label}
)
}
}
导出默认类DropDownComponent扩展React.Component{
renderSelect（）{
//这里呈现您的选择和选项
}
render（）{
返回(
{this.props.checkboxChecked==false？this.renderSelect:null}
)
}
}
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
checkboxChecked:false
};
}
onCheckedChanged（）{
this.setState（{checkboxChecked:！this.state.checkboxChecked}）；
}
render（）{
返回(
)
}
}
您可以做的是设置两个道具发送到子组件以重新渲染它们

示例

   export default class CheckBoxComponent extends React.Component {
       changeInput() {
          this.props.onCheckedChanged();
       }

       render() {
         return(
           <div className='permission-item'>
            <div className='ui checkbox'>
              <input type='checkbox' onChange={this.changeInput} ref={this.getRef}/>
              <label onClick={this.changeInput.bind(this)} style={pointer}>
                {label}
              </label>
            </div>
          </div>
         )
       }
   }

   export default class DropDownComponent extends React.Component {
       renderSelect() {
         // here render your select and options
       }
       render() {
         return(
           <div>
             {this.props.checkboxChecked === false ? this.renderSelect : null}
           </div>
         )
       }
   }

    export default class App extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                checkboxChecked: false
            };
        }
        onCheckedChanged() {
          this.setState({ checkboxChecked: !this.state.checkboxChecked });
        }
        render() {
            return(
                <div>
                    <CheckBoxComponent onCheckedChanged={this.onCheckedChanged.bind(this)} />
                    <DropDownComponent checkboxChecked={this.state.checkboxChecked} />
                </div>
            )
        }
    }

博览会