Reactjs React Native通过从父组件单击来处理大量输入

我是个新手。在我的项目中，我有不同数量的自定义手风琴对象，这些对象具有文本输入的平面列表。我如何处理这样一个输入系统，从accordion对象的父对象单击一个按钮。我希望有一个按钮，收集所有当前输入，然后在服务器或任何其他相关页面上结束它。（我正在使用带有状态挂钩的功能布局。）

谢谢你的回复， 胜过

您可以在下面看到accordion.js：

    import React, { Component, useState, useEffect} from 'react';
    import { View, TouchableOpacity, FlatList, StyleSheet, TextInput } from "react-native";
    //import { Colors } from './Colors';

    import { theme } from "../constants";
    import Text from "./Text";

    import Icon from "react-native-vector-icons/MaterialIcons";
    import { ScrollView } from 'react-native-gesture-handler';
    const Colors = {
      PRIMARY: '#1abc9c',

      WHITE: '#ffffff',
      LIGHTGREEN: '#BABABA',
      GREEN: '#0da935',


      GRAY: '#f7f7f7',
      LIGHTGRAY: '#C7C7C7',
      DARKGRAY: '#5E5E5E',
      CGRAY: '#ececec',
      OFFLINE_GRAY: '#535353'
    }


    export default function Accordion (props)  {


      const [data, setData] = useState(props.data)

      const [expanded, setExpanded] = useState(false)

      const onClick = (index) => {
        const temp = data.slice()
        temp[index].value = !temp[index].value
        console.log(temp)
        setData(temp)
      }


      const toggleExpand = (section) => {
        //this.setState({ expanded: !this.state.expanded )

        setExpanded(prev_state => !prev_state)
        props.fromparentonClick(expanded)

        }

      useEffect(() => {
          console.log('will unmount')

      }, [expanded]);



        return (

          <View>
            <TouchableOpacity
              style={styles.row}
              onPress={() => toggleExpand()}
            >
              <Text style={[styles.title, styles.font]}>
                {props.title}
              </Text>
              <Icon
                name={
                    expanded
                    ? "keyboard-arrow-up" //this is condinational  ternary operator rendering :)
                    : "keyboard-arrow-down"
                }
                size={30}
                color={Colors.DARKGRAY}
              />
            </TouchableOpacity>
            <View style={styles.parentHr} />
            { expanded && ( //this is short circuit operator
              <View style={{}}>
                <FlatList
                  data={data}
                  numColumns={1}
                  scrollEnabled={true}
                  renderItem={({ item, index }) => (
                    <View styles={styles.deneme}>
                      <Text style={[styles.font, styles.itemInActive]}>
                        {item.key}
                      </Text>
                      <TouchableOpacity
                        style={[
                          styles.childRow,
                          styles.button,
                          item.value ? styles.btnInActive : styles.btnActive
                        ]}
                        onPress={() => onClick(index)}
                      >

                        <Icon
                          name={"check-circle"}
                          size={24}
                          color={item.value ? Colors.LIGHTGRAY : Colors.GREEN}
                        />
                        {/* <Text style={[styles.font, styles.itemInActive]}>
                              {item.key}
                            </Text>*/}

                        <TextInput
                          style={
                            styles.text_input
                          }
                          blurOnSubmit
                          placeholder="input1"
                          placeholderTextColor="#60605e"
                          numeric
                          keyboardType={"numeric"}
                          maxLength={3}
                        />

                        <TextInput
                          style={
                            styles.text_input
                          }
                          blurOnSubmit
                          placeholder="input2"
                          placeholderTextColor="#60605e"
                          numeric
                          keyboardType={"numeric"}
                          maxLength={3}
                        />

                        <TextInput
                          style={
                            styles.text_input
                          }
                          blurOnSubmit
                          placeholder="input3"
                          placeholderTextColor="#60605e"
                          numeric
                          keyboardType={"numeric"}
                          maxLength={3}
                        />

                      </TouchableOpacity>


                      <View style={styles.childHr} />
                    </View>
                  )}
                />
              </View>
            )}
          </View>
        );

                        }

    const styles = StyleSheet.create({
      container: {
        justifyContent: 'center',
        alignItems: 'center'
      },
      font: {
        // fontFamily: Fonts.bold,
      },
      button: {
        width: '100%',
        height: 54,
        alignItems: 'center',
        paddingLeft: 35,
        paddingRight: 35,
        fontSize: 12,
      },
      title: {
        fontSize: 14,
        fontWeight: 'bold',
        color: Colors.DARKGRAY,
      },
      itemActive: {
        fontSize: 12,
        color: Colors.GREEN,
      },
      itemInActive: {
        fontSize: 12,
        color: Colors.DARKGRAY,
      },
      btnActive: {
        borderColor: Colors.GREEN,
      },
      btnInActive: {
        borderColor: Colors.DARKGRAY,
      },
      row: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        height: 56,
        paddingLeft: 25,
        paddingRight: 18,
        alignItems: 'center',
        backgroundColor: Colors.CGRAY,
      },
      childRow: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        backgroundColor: Colors.GRAY,
      },
      parentHr: {
        height: 1,
        color: Colors.WHITE,
        width: '100%'
      },
      childHr: {
        height: 1,
        backgroundColor: Colors.LIGHTGRAY,
        width: '100%',
      },
      colorActive: {
        borderColor: Colors.GREEN,
      },
      colorInActive: {
        borderColor: Colors.DARKGRAY,
      },
      text_input: {

        width: 80,
        backgroundColor: "#dde8c9",
        padding: 10,
        textAlign: 'center'

      },
      deneme: {
        flexDirection: 'column',
        textAlign: 'center',
        justifyContent: 'center',




      }

    });

import React，{Component，useState，useffect}来自'React'；
从“react native”导入{View、TouchableOpacity、FlatList、样式表、TextInput}；
//从“./Colors”导入{Colors}；
从“./constants”导入{theme}；
从“/Text”导入文本；
从“反应本机矢量图标/唯物主义者”导入图标；
从“反应本机手势处理程序”导入{ScrollView}；
常量颜色={
主要：“#1abc9c”，
白色：“#ffffff”，
浅绿色：“#巴巴巴”，
绿色：“#0da935”，
灰色：“#f7f7f7”，
浅灰色：“#C7C7C7”，
黑格雷：“#5e5e”，
CGRAY:#ececec",，
脱机_GRAY:“#535353”
}
导出默认功能手风琴（道具）{
const[data，setData]=useState（props.data）
const[expanded，setExpanded]=useState（false）
const onClick=（索引）=>{
const temp=data.slice（）
temp[index].value=！temp[index].value
控制台日志（临时）
设置数据（温度）
}
const-toggleExpand=（节）=>{
//this.setState（{expanded:！this.state.expanded）
setExpanded（上一个状态=>！上一个状态）
props.fromparentonClick（扩展）
}
useffect（（）=>{
console.log（'将卸载'）
}，[扩大]；
返回(
toggleExpand（）}
>
{props.title}
{扩展&&（//这是短路运算符
(
{item.key}
onClick（索引）}
>
{/* 
{item.key}
*/}
)}
/>
)}
);
}
const styles=StyleSheet.create({
容器：{
为内容辩护：“中心”，
对齐项目：“中心”
},
字体：{
//fontFamily:Fonts.bold，
},
按钮：{
宽度：“100%”，
身高：54，
对齐项目：“居中”，
paddingLeft:35，
paddingRight:35，
尺寸：12，
},
标题：{
尺寸：14，
fontWeight:'粗体'，
颜色：Colors.DARKGRAY，
},
项目活动：{
尺寸：12，
颜色：颜色。绿色，
},
项目不活动：{
尺寸：12，
颜色：Colors.DARKGRAY，
},
b活动：{
边框颜色：Colors.GREEN，
},
btnInActive：{
borderColor:Colors.DARKGRAY，
},
行：{
flexDirection:'行'，
justifyContent:'之间的空间'，
身高：56，
paddingLeft:25，
paddingRight:18，
对齐项目：“居中”，
背景颜色：Colors.CGRAY，
},
childRow：{
flexDirection:'行'，
为内容辩护：“周围的空间”，
背景颜色：Colors.GRAY，
},
家长人力资源：{
身高:1,，
颜色：颜色，白色，
宽度：“100%”
},
儿童人权：{
身高:1,，
背景颜色：颜色。浅灰色，
宽度：“100%”，
},
彩色活性：{
边框颜色：Colors.GREEN，
},
不活动颜色：{
borderColor:Colors.DARKGRAY，
},
文本输入：{
宽度：80，
背景色：“dde8c9”，
填充：10，
textAlign:“中心”
},
德内梅：{
flexDirection:'列'，
textAlign:'中心'，
为内容辩护：“中心”，
}
});

您可以在下面看到父组件：

    import * as WebBrowser from 'expo-web-browser';
    import React, { Component,useState } from 'react';

    import {
      Image,
      Platform,
      ScrollView,
      StyleSheet,
      Text,
      TouchableOpacity,
      View,
    } from 'react-native';

    import { Button, Block, Input,Accordion ,Header} from "../components";
    import { theme } from "../constants";
    //import {CATEGORIES} from "../Data/dersler";
    import SwitchSelector from "react-native-switch-selector";

    import { MonoText } from '../components/StyledText';
    import 'core-js/es6/symbol'; import 'core-js/fn/symbol/iterator';


      export default function HomeScreen (props) {



                      const options = [
                          { label: "x", value: "1" },
                          { label: "y", value: "2" }
                        ]


                        const initial_state = {

                          courses: [
                            {
                              key: "c1",
                              title: "ss",
                              data: [
                                { key: "dd", value: "false" },
                                { key: "ff", value: "false" },
                                { key: "gg ", value: "false" }
                              ]
                            },
                            {
                              key: "c2",
                              title: "ss2",
                              data: [
                                { key: "dd", value: "false" },
                                { key: "ff", value: "false" },
                                { key: "gg", value: "false" },
                                { key: "cc", value: "false" }
                              ]
                            },

                          ],





                        }



                        const second_state = {

                          courses: [
                            {
                              key: "c1",
                              title: "dd",
                              data: [
                                { key: "cc", value: "false" },
                                { key: "dd", value: "false" },
                                { key: "ff ", value: "false" }
                              ]
                            },

                          ]




                        }











    const [exam, setExam] = useState(initial_state)
    const [onlineAcc, setonlineAcc] = useState(false)
    const [activeSession, setactiveSession] = useState(0)

    const controlAccordions = (arg) => {

      setonlineAcc(prev_state => !prev_state)

      //console.log(onlineAcc)
      console.log(arg)

      if(arg){
        setactiveSession(prev_state => prev_state -1 )

      }

      else {

        setactiveSession(prev_state => prev_state + 1)

      }
      console.log(activeSession)


    }

    const renderAccordians = () => {

          let items = [];
          //console.log(`Call onPress with value: ${ this.state}`);
          //console.log(exam.courses);

      return exam.courses.map(ex => (<Accordion active={activeSession} fromparentonClick={controlAccordions} title={ex.title} data={ex.data} key={ex.key} /> ))



          //return items;
        }




     return (
                          <View style={styles.container}>
                            <Header title="Anasayfa" />

                            <SwitchSelector
                              options={options}
                              initial={1}
                              buttonColor={theme.colors.gray2}

                              onPress={value => {

                              if( value== 1)
                              {setExam (second_state)}

                              else {

                                setExam(initial_state)
                              }

                              console.log(value)


                              }}
                            />
                            <ScrollView style={styles.container}>
                              {renderAccordians()}
                            </ScrollView>
                          </View>
                        );




      }



    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
      },
      developmentModeText: {
        marginBottom: 20,
        color: 'rgba(0,0,0,0.4)',
        fontSize: 14,
        lineHeight: 19,
        textAlign: 'center',
      },
      contentContainer: {
        paddingTop: 30,
      },
      welcomeContainer: {
        alignItems: 'center',
        marginTop: 10,
        marginBottom: 20,
      },
      welcomeImage: {
        width: 100,
        height: 80,
        resizeMode: 'contain',
        marginTop: 3,
        marginLeft: -10,
      },
      getStartedContainer: {
        alignItems: 'center',
        marginHorizontal: 50,
      },
      homeScreenFilename: {
        marginVertical: 7,
      },
      codeHighlightText: {
        color: 'rgba(96,100,109, 0.8)',
      },
      codeHighlightContainer: {
        backgroundColor: 'rgba(0,0,0,0.05)',
        borderRadius: 3,
        paddingHorizontal: 4,
      },
      getStartedText: {
        fontSize: 17,
        color: 'rgba(96,100,109, 1)',
        lineHeight: 24,
        textAlign: 'center',
      },
      tabBarInfoContainer: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        ...Platform.select({
          ios: {
            shadowColor: 'black',
            shadowOffset: { width: 0, height: -3 },
            shadowOpacity: 0.1,
            shadowRadius: 3,
          },
          android: {
            elevation: 20,
          },
        }),
        alignItems: 'center',
        backgroundColor: '#fbfbfb',
        paddingVertical: 20,
      },
      tabBarInfoText: {
        fontSize: 17,
        color: 'rgba(96,100,109, 1)',
        textAlign: 'center',
      },
      navigationFilename: {
        marginTop: 5,
      },
      helpContainer: {
        marginTop: 15,
        alignItems: 'center',
      },
      helpLink: {
        paddingVertical: 15,
      },
      helpLinkText: {
        fontSize: 14,
        color: '#2e78b7',
      },
    });

import*作为“世博网络浏览器”的网络浏览器；
从“React”导入React，{Component，useState}；
进口{
形象,，
平台，
滚动视图，
样式表，
文本，
可触摸不透明度，
看法
}从“反应本机”；
从“./组件”导入{按钮、块、输入、手风琴、标题}；
从“./constants”导入{theme}；
//从“./Data/dersler”导入{CATEGORIES}”；
从“反应本机开关选择器”导入开关选择器；
从“../components/StyledText”导入{MonoText}；
导入“核心js/es6/symbol”；导入“core js/fn/symbol/iterator”；
导出默认功能主屏幕（道具）{
常量选项=[
{标签：“x”，值：“1”}，
{标签：“y”，值：“2”}
]
常量初始状态={
课程：[
{
键：“c1”，
标题:"党卫军",，
数据：[
{键：“dd”，值：“false”}，
{键：“ff”，值：“false”}，
{键：“gg”，值：“false”}
]
},
{
键：“c2”，
标题：“ss2”，
数据：[
let accordionData = [];

const addAccordionData = data => {
   accordionData.push(data);
}  

const renderAccordians = () => {

    let items = [];
          //console.log(`Call onPress with value: ${ this.state}`);
          //console.log(exam.courses);

      return exam
        .courses.map(ex => (
            <Accordion 
             active={activeSession} 
             fromparentonClick= {controlAccordions} 
             title={ex.title} 
             data={ex.data} 
            onAccordianDataSet={addAccordianData} // add this line <====
             key={ex.key} /> ))



          //return items;
}


// in the **accordion ** component do this
const onClick = (index) => {
        const temp = data.slice()
        temp[index].value = !temp[index].value
        console.log(temp)
        setData(temp);
       // add this line
        props.onAccordianDataSet(temp); // now the answer will be in the parents
      }

const submitDataToDatabase = () => {
   if(accordionData.length === 0) {
       alert("answer every question"); 
       return;
   }

   submit data to database storage
}