dimanche 1 septembre 2019

How to update checkbox appearance or state in child

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