React native 如何更新子系统中复选框的外观或状态

尽管有一些帖子，比如：

我有一个有很多复选框的父母。根据开关的状态，我将child1或child2插入父开关

每个孩子都有4-5个复选框，而不仅仅是一个

我发现（对我来说）最好的方法是让复选框值的状态和复选框的视觉状态（如显示为选中或未选中）应该在父级中使用道具处理。我不想使用redux

我对复选框未在子项中显示为checked有问题，即使值被传回。我在每个孩子身上都有一个切换功能，但这仅仅意味着当它工作时，它落后了一步，选中时显示未选中，反之亦然

我的父母：

 import React, { Component } from "react";
 import { StyleSheet, Text, View, Image, ImageBackground, ScrollView, Switch, Platform } from "react-native";
 import CircleCheckBox, { LABEL_POSITION } from "react-native-circle-checkbox";
 import Child1 from "../components/Child1";
 import Child2 from "../components/Child2";

  // Function called when checkbox is toggled
  onchange(checkedBoxName, value){
  if(this.state[checkedBoxName]==false){
   this.setState({
    [checkedBoxName]: true,
 }) 
 Let myResult = null,
 // Do math and stuff with the value argument and set outputText 
 this.setState({outputText: myResult});
 }


 class ParentScreen extends Component {
      constructor(props) {
     super(props);

      this.state = {
      outputText: "",
      ///checkbox states that are in the parent here

      //followed by states for child1 checkbox
 Checked10: false,
 Checked11: false,
 Checked12: false,
 Checked13: false,
 // then child2 checkboxes
 Checked14: false,
 Checked15: false,
 Checked16: false,
 Checked17: false,
 }

 render(){
      return(
 // bunch of views and checkboxes etc in the parent like this:

 <View style={[styles.checkbox, styles.checkbox2]} >
          <CircleCheckBox outerSize={28} filterSize={26} innerSize={14}
  outerColor={"#ff0000"} filterColor={"#FFF"} innerColor={"#ff0000"} 
 style={styles.checkbox} checked={this.state.checked1} onToggle={(checked) => this.onchange("checked1", 1)} />
        </View>

 // etc
 // Then choosing and displaying my child component:

  <View>
 {switchChild ? <Child1 changeChild1 ={this.onchange.bind(this)}  /> : <Child2 changeChild2 ={this.onchange.bind(this)} />}
        </View>

import React，{Component}来自“React”；
从“react native”导入{样式表、文本、视图、图像、图像背景、滚动视图、开关、平台}；
从“反应本机圆复选框”导入CircleCheckBox，{LABEL_POSITION}；
从“./components/Child1”导入Child1；
从“./components/Child2”导入Child2；
//切换复选框时调用的函数
onchange（checkedBoxName，value）{
if（this.state[checkedBoxName]==false）{
这是我的国家({
[checkedBoxName]：true，
}) 
让myResult=null，
//用value参数和set outputText进行数学运算和填充
this.setState（{outputText:myResult}）；
}
类ParentScreen扩展组件{
建造师（道具）{
超级（道具）；
此.state={
输出文本：“”，
///复选框中的状态在此处的父项中
//后跟child1的状态复选框
检查10：错误，
检查11：错误，
检查12：错误，
检查13：错误，
//然后选中两个复选框
检查14：错误，
检查15：错误，
检查16：错误，
检查17：错误，
}
render（）{
返回(
//父视图中的一组视图和复选框等，如下所示：
this.onchange（“checked1”，1）}/>
//等
//然后选择并显示我的子组件：
{switchChild？：}

))； }

然后在我的子组件中：

  import React, { Component } from "react";
  import { View, Text, StyleSheet, Image } from "react-native";
  import CircleCheckBox, {LABEL_POSITION} from "react-native-circle-checkbox";

  class PL extends Component {
 // no checkbox states here

  render() {
        return(
   <View style={[styles.checkbox, styles.checkbox2]} >
        <CircleCheckBox outerSize={28} filterSize={26} innerSize={14} outerColor={"#ff0000"} filterColor={"#FFF"} innerColor={"#ff0000"} style={styles.checkbox} checked={this.state.checked10} onToggle={(checked) => { this.props.changeChild1("checked10", 10) }} />
      </View>

  <View style={[styles.checkbox, styles.checkbox2]} >
       <CircleCheckBox outerSize={28} filterSize={26} innerSize={14} outerColor={"#ff0000"} filterColor={"#FFF"} innerColor={"#ff0000"} style={styles.checkbox} checked={this.state.checked11} onToggle={(checked) => { this.props.changeChild1("checked11", 11) }} />
   </View>

  <View style={[styles.checkbox, styles.checkbox2]} >
        <CircleCheckBox outerSize={28} filterSize={26} innerSize={14}
  outerColor={"#ff0000"} filterColor={"#FFF"} innerColor={"#ff0000"} style={styles.checkbox} checked={this.state.checked12} onToggle=      {(checked) => { this.props.changeChild1("checked12", 12) }} />
   </View>

 //etc
 );
 }

 }

import React，{Component}来自“React”；
从“react native”导入{视图、文本、样式表、图像}；
从“反应本机圆复选框”导入CircleCheckBox，{LABEL_POSITION}；
类PL扩展组件{
//这里没有复选框
render（）{
返回(
{this.props.changeChild1（“checked10”，10）}/>
{this.props.changeChild1（“checked11”，11）}/>
{this.props.changeChild1（“checked12”，12）}/>
//等
);
}
}

所以，我需要的是一种显示每个子复选框在单击时被选中的方法，特别是当子复选框中有多个复选框时。因为它不止一个复选框，所以我不能只在特定状态下硬编码。我假设我在“checked={this.state.checked11}”行中使用了一个变量（比如：checked={this.state[aVarWithCheckboxName]}，或者有其他方法可以做到这一点

---

这需要传递多个函数才能工作吗？

好的。因此，在这里和那里进行了大量的读取和提取之后，我修复了这个问题。但我认为这可能有点过分，所以我想知道如何避免将整个状态发送给子级，而只发送或引用一组状态项

已删除子组件中的所有状态。所有复选框的状态与处理数据的所有函数一起放入父组件中

家长： 由于ES6，不需要“.bind（this）”

  <View>
   {switchChild ? <Child1 changeChild1 ={this.onchange} {...this.state} /> : <Child2 changeChild2 ={this.onchange} {...this.state} />}
  </View>

{switchChild？：}

儿童：

  <View style={[styles.checkbox, styles.checkbox2]} >
        <CircleCheckBox //all the styling goes here
          checked={this.props.checked10} onToggle={(checked) => { this.props.changeChild1("checked10", 10) }} /> }} />
  </View>

{this.props.changeChild1（“checked10”，10）}/>}/>

因此，现在无论我有多少个复选框，我都可以使用复选框的单独名称访问父状态

如果有更好的处理方法（以父状态中的选中项为目标），请告诉我