I have searched about but not found a solution (I'm a beginner, so...) despite a few posts such as: Use modal to take user checkbox input and return data back to parent component
I have a parent with a number of checkboxes. Depending on the state of a switch I insert either child1 or child2 into the parent.
Each child has 4-5 checkboxes, not just one.
I have figured out that the best way (for me) is to have the state for the checkbox values and the checkbox visual state (as in a showing as checked or unchecked) should be handled in the parent with props. I don't want to use redux.
I am having issue with the checkbox not showing as checked in the child, even though the value is being passed back. I had a toggle function in each child but that just meant that while it worked, it was one step behind, showing unchecked when checked and vice versa.
My parent:
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>
); }
Then in my child component:
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
);
}
}
So, what I need is a way to show that each child checkbox is checked when it's clicked, particularly when there are multiple checkboxes in the child. Since it's more than one checkbox, I can't just hard code in a particular state. I assume I use a variable in the "checked={this.state.checked11}" line (like: checked={this.state[aVarWithCheckboxName]} or maybe there is another way to do this?
Will this need to pass multiple functions to work?
Aucun commentaire:
Enregistrer un commentaire