0

我是 React 世界的初学者。在我的项目中,我有不同数量的自定义手风琴对象,它们具有文本输入的平面列表。我如何通过从手风琴对象的父级单击单击来处理这样的输入系统。我想要一个按钮来收集所有当前输入,然后在服务器或任何其他相关页面上结束它。(我正在使用带有状态挂钩的功能布局。)

谢谢你的任何回应,最好的

你可以在这里看到布局!

您可能会在下面看到手风琴.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 * 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',
      },
    });
4

1 回答 1

0

您将必须跟踪父类中手风琴的数据

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
}
于 2020-02-13T14:30:01.043 回答