Javascript 向父组件传递数据时是否需要提升状态？

我正在做我的react native项目，我想我犯了一个大错误。我有一个

DaySelector

组件，它有一个子

Day

。他们的目的是创建一个多选择栏，显示一周中的每一天。代码如下：

import * as React from "react";
import { View, Text, StyleSheet, Button, Alert } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import colors from "../assets/constants/style-variables";

interface Item {
  selected: Boolean;
  day: String;
}

function Day(props) {
  return (
    <TouchableOpacity
      onPress={props.onPress}
      style={props.selected ? styles.buttonActive : styles.button}
    >
      <Text>{props.day}</Text>
    </TouchableOpacity>
  );
}

export default class DaySelector extends React.Component<
  {},
  { selectedItems: undefined | Item[]; items: Item[] }
> {
  constructor(props) {
    super(props);
    this.state = {
      selectedItems: [],
      items: [
        {
          selected: false,
          day: "Lu",
        },
        {
          selected: false,
          day: "Ma",
        },
        {
          selected: false,
          day: "Mi",
        },
        {
          selected: false,
          day: "Ju",
        },
        {
          selected: false,
          day: "Vi",
        },
        {
          selected: false,
          day: "Sa",
        },
        {
          selected: false,
          day: "Do",
        },
      ],
    };
  }

  onPress = (index) => {
    let items = [...this.state.items];
    let item = { ...items[index] };
    item.selected = !item.selected;
    items[index] = item;
    this.setState({ items });
    this.setState((prevState) => ({
      selectedItems: prevState.items.filter((i) => i.selected),
    }));
  };

  onCompleteSelection = () => {
    console.log(this.state.selectedItems);
  };

  render() {
    return (
      <View>
        <View style={styles.container}>
          {this.state.items.map((item, index) => {
            return (
              <Day
                key={index}
                selected={item.selected}
                day={item.day}
                onPress={this.onPress.bind(this, index)}
              />
            );
          })}
        </View>
        <Button title={"Check"} onPress={this.onCompleteSelection} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
  },
  button: {
    margin: 5,
    borderColor: colors.lightGray,
    borderWidth: 2,
    borderRadius: 40,
    padding: 7,
  },
  buttonActive: {
    margin: 5,
    borderColor: colors.primary,
    borderWidth: 2,
    backgroundColor: colors.primary,
    borderRadius: 50,
    padding: 7,
  },
});

import*as React from“React”；
从“react native”导入{视图、文本、样式表、按钮、警报}；
从“反应本机手势处理程序”导入{TouchableOpacity}；
从“./资源/常量/样式变量”导入颜色；
接口项{
所选：布尔型；
天：弦；
}
活动日（道具）{
返回(
{props.day}
);
}
导出默认类DaySelector扩展React.Component<
{},
{selectedItems:undefined |项[]；项：项[]}
> {
建造师（道具）{
超级（道具）；
此.state={
selectedItems:[]，
项目：[
{
选择：false，
天：“鲁”，
},
{
选择：false，
天：“妈”，
},
{
选择：false，
天：“米”，
},
{
选择：false，
日：“鞠”，
},
{
选择：false，
第六天：，
},
{
选择：false，
日期：“Sa”，
},
{
选择：false，
日：“做”，
},
],
};
}
onPress=（索引）=>{
让items=[…this.state.items]；
let item={…items[index]}；
item.selected=！item.selected；
项目[索引]=项目；
this.setState（{items}）；
this.setState（（prevState）=>({
selectedItems:prevState.items.filter（（i）=>i.selected），
}));
};
onCompleteSelection=（）=>{
console.log（this.state.selectedItems）；
};
render（）{
返回(
{this.state.items.map（（项，索引）=>{
返回(
);
})}
);
}
}
const styles=StyleSheet.create({
容器：{
flexDirection:“行”，
},
按钮：{
差额：5，
边框颜色：颜色。浅灰色，
边界宽度：2，
边界半径：40，
填充：7，
},
按钮活动：{
差额：5，
边框颜色：colors.primary，
边界宽度：2，
背景颜色：colors.primary，
边界半径：50，
填充：7，
},
});

它工作得非常好，抓取数据并将其记录在控制台中。但问题是，我将这个组件集成到另一个“表单”中，用户不仅要选择一周中的几天，还要选择一些日程安排。我需要设置一个“下一步”按钮，用于汇总所有组件获取的数据

我最大的问题是，我能想到的唯一一件事是提升状态，这将非常复杂，因为父组件是一个功能组件：

import React, { useState } from "react";
import { useMutation } from "@apollo/react-hooks";
import { REGISTER } from "../Queries";
import Loader from "../components/Loader";
import DateTimePicker from "@react-native-community/datetimepicker";
import { View, Button, StyleSheet } from "react-native";
import colors from "../assets/constants/style-variables";
import { TouchableOpacity } from "react-native-gesture-handler";
import PrimaryText from "../assets/constants/PrimaryText";
import DaySelector from "../components/DaySelector";

export default function ScheduleSelect({ navigation, route }) {
  const [loadingRegistration, setLoadingRegistration] = useState(null);

  const [showTimePicker1, setShowTimePicker1] = useState(false);
  const [showTimePicker2, setShowTimePicker2] = useState(false);

  const [time1, setTime1] = useState(null);
  const [time2, setTime2] = useState(null);


  const show1 = () => {
    setShowTimePicker1(true);
  };

  const show2 = () => {
    setShowTimePicker2(true);
  };

  const handleTimePick1 = (event, selectedTime) => {
    setShowTimePicker1(false);
    if (selectedTime !== undefined) {
      setTime1(selectedTime);
    }
  };

  const handleTimePick2 = (event, selectedTime) => {
    setShowTimePicker2(false);
    if (selectedTime !== undefined) {
      setTime2(selectedTime);
    }
  };

  return (
    <View style={styles.container}>
      <PrimaryText fontSize={20} margin={22} textAlign={"center"}>
        Recibirás turnos en estos horarios:
      </PrimaryText>
      <View style={styles.cardHolder}>
        <View style={styles.card}>
          <View style={styles.timeHelper}>
            <PrimaryText textAlign={"center"}>Desde</PrimaryText>
          </View>
          {time1 && (
            <TouchableOpacity onPress={show1}>
              <View style={styles.timeSelected}>
                <PrimaryText textAlign={"center"} fontSize={36}>
                  {`${time1?.getHours()}:${
                    time1.getMinutes() < 10
                      ? "0" + time1.getMinutes()
                      : time1.getMinutes()
                  }`}
                </PrimaryText>
              </View>
            </TouchableOpacity>
          )}
          {!time1 && (
            <TouchableOpacity style={styles.button} onPress={show1}>
              <PrimaryText fontSize={36} letterSpacing={2} textAlign={"center"}>
                --:--
              </PrimaryText>
            </TouchableOpacity>
          )}
          {showTimePicker1 && (
            <DateTimePicker
              value={new Date()}
              testID="dateTimePicker"
              mode={"time"}
              is24Hour={true}
              display="default"
              onChange={handleTimePick1}
            />
          )}
        </View>
        <PrimaryText fontSize={36} margin={7}>
          -
        </PrimaryText>
        <View style={styles.card}>
          <View style={styles.timeHelper}>
            <PrimaryText textAlign={"center"}>Hasta</PrimaryText>
          </View>
          {time2 && (
            <TouchableOpacity onPress={show2}>
              <View style={styles.timeSelected}>
                <PrimaryText textAlign={"center"} fontSize={36}>
                  {`${time2?.getHours()}:${
                    time2.getMinutes() < 10
                      ? "0" + time2.getMinutes()
                      : time2.getMinutes()
                  }`}
                </PrimaryText>
              </View>
            </TouchableOpacity>
          )}
          {!time2 && (
            <TouchableOpacity style={styles.button} onPress={show2}>
              <PrimaryText fontSize={36} letterSpacing={2} textAlign={"center"}>
                --:--
              </PrimaryText>
            </TouchableOpacity>
          )}
          {showTimePicker2 && (
            <DateTimePicker
              value={new Date()}
              testID="dateTimePicker"
              mode={"time"}
              is24Hour={true}
              display="default"
              onChange={handleTimePick2}
            />
          )}
        </View>
      </View>
      {time2?.getTime() < time1?.getTime() && (
        <PrimaryText color={colors.warning}>
          Por favor, seleccioná horarios válidos
        </PrimaryText>
      )}
      <PrimaryText margin={5}> Los días: </PrimaryText>
      <View style={styles.card}>
        <DaySelector />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: "100%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  button: {
    padding: 7,
  },
  card: {
    flexDirection: "row",
    justifyContent: "center",
    backgroundColor: colors.iceWhite,
    borderRadius: 10,
    padding: 20,
    marginBottom: 10,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  cardHolder: {
    flexDirection: "row",
    alignItems: "center",
  },
  timeHelper: {
    justifyContent: "center",
    position: "absolute",
    marginTop: 5,
  },
  timeSelected: {
    alignItems: "center",
    justifyContent: "center",
  },
  editIcon: {
    right: 3,
    top: 3,
    position: "absolute",
  },
});

import React，{useState}来自“React”；
从“@apollo/react hooks”导入{useStation}”；
从“./查询”导入{REGISTER}；
从“./组件/加载器”导入加载器；
从“@react native community/DateTimePicker”导入DateTimePicker；
从“react native”导入{View，Button，StyleSheet}；
从“./资源/常量/样式变量”导入颜色；
从“反应本机手势处理程序”导入{TouchableOpacity}；
从“./assets/constants/PrimaryText”导入PrimaryText；
从“./components/DaySelector”导入DaySelector；
导出默认函数ScheduleSelect（{导航，路由}）{
const[loadingRegistration，setLoadingRegistration]=useState（null）；
常量[showTimePicker1，setShowTimePicker1]=useState（false）；
常量[showTimePicker2，setShowTimePicker2]=useState（false）；
const[time1，setTime1]=useState（null）；
const[time2，setTime2]=useState（null）；
常量show1=（）=>{
设置ShowTimePicker1（真）；
};
常量show2=（）=>{
设置ShowTimePicker2（真）；
};
常量handleTimePick1=（事件，selectedTime）=>{
设置ShowTimePicker1（假）；
如果（selectedTime！==未定义）{
设置时间1（选择时间）；
}
};
const handleTimePick2=（事件，selectedTime）=>{
设置ShowTimePicker2（假）；
如果（selectedTime！==未定义）{
设置时间2（选择时间）；
}
};
返回(
雷西比亚斯·图诺斯·埃斯托斯·霍拉里奥斯：
德斯德
{time1&&(
{`${time1？.getHours（）}：${
time1.getMinutes（）<10
？“0”+时间1.getMinutes（）
：time1.getMinutes（）
}`}
)}
{！time1&&(
--:--
)}
{showTimePicker1&&(
)}
-
哈斯塔
{time2&&(
{`${time2？.getHours（）}：${
time2.getMinutes（）<10
？“0”+time2.getMinutes（）
：time2.getMinutes（）
}`}
)}
{！时间2&&(
--:--
)}
{showTimePicker2&&(
)}
{time2？.getTime（）const handleChange = (value) => {
  setDay(value);
}
<DaySelector onChange={handleChange} />

onCompleteSelection = () => {
  this.props.onChange(this.state.selectedItems);
};