如何更新子项中的复选框外观或状态

Question

我已经搜索了但没有找到解决方案(我是初学者，所以......(，尽管有一些帖子，例如： 使用模态获取用户复选框输入并将数据返回给父组件

我有一个家长，有很多复选框。根据开关的状态，我将子项 1 或子项 2 插入父项。

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

我已经发现(对我来说(最好的方法是让复选框值的状态和复选框视觉状态(如显示为选中或未选中(应该在父级中使用 props 处理。我不想使用冗余。

我遇到复选框未在子项中显示为选中状态的问题，即使值正在传回。我在每个孩子身上都有一个切换功能，但这只是意味着虽然它有效，但它落后了一步，在选中时显示未选中，反之亦然。

我的父母：

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 } 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
);
}
}

因此，我需要的是一种方法来显示单击每个子复选框时都会被选中，尤其是当子复选框中有多个复选框时。由于它有多个复选框，因此我不能在特定状态下进行硬编码。我假设我在"checked={this.state.checked11}"行中使用了一个变量(比如：checked={this.state[aVarWithCheckboxName]}，或者也许还有另一种方法可以做到这一点？

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

Answer 1

好的。因此，经过更多的阅读并在这里和那里提取了一些东西，我解决了这个问题。但我认为这可能有点矫枉过正，所以想听听如何避免将整个状态发送给孩子，而只是发送或引用一系列状态项目。

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

父母： 由于ES6，不需要".bind(this("。

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

孩子：

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

因此，现在无论我有多少个复选框，我都可以使用复选框的单个名称访问父状态。发回数据以运行 onchange 函数保持不变。

如果有更好的处理方法(针对父状态中的选中项目(，请告诉我。