0

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

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

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

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

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

我的父母：

 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]} 或者可能有另一种方法可以做到这一点？

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

4

1 回答 1

0

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

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

家长：感谢 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 函数保持不变。

如果有更好的处理方法（将选中的项目定位在父状态），请告诉我。

于 2019-09-03T19:25:58.067 回答