forms - 如何创建多个动态表单并分别存储它们的值以在 react native 中提交

Question

我有一个表格来添加教育。每当用户按下“添加教育”时，我都想要一个功能。它呈现相同的表单，每个表单的值应单独存储。我怎样才能做到这一点？

我已经实现了以下

  const [degree, setDegree] = useState("");
  const [institution, setInstitution] = useState("");
  const [startYear, setStartYear] = useState("");
  const [lastYear, setLastYear] = useState("");

  const userEduDetails = [
    {
      degree: degree,
      institution: institution,
      startYear: startYear,
      lastYear: lastYear,
    },
  ];

  const [userEducation, setUserEducation] = useState(userEduDetails);

  const addEducationHandler = () => {
    setUserEducation([
      ...userEducation,
      { degree, institution, startYear, lastYear },
    ]);
  };

然后我映射到 userEducation

 {userEducation?.map((elements, index) => (
            <View style={{ marginBottom: 15 }}>
              <TextInput
                multiline={true}
                style={styles.inputTwo}
                maxLength={250}
                value={degree}
                onChangeText={(text) => setDegree(text)}
                placeholder="Degree"
              />
              <TextInput
                multiline={true}
                style={styles.inputTwo}
                onChangeText={(text) => setInstitution(text)}
                maxLength={250}
                value={institution}
                placeholder="Institution"
              />
              <View style={{ width: "100%", flexDirection: "row" }}>
                <View style={{ width: "45%" }}>
                  <TextInput
                    multiline={true}
                    style={styles.inputTwo}
                    maxLength={250}
                    value={startYear}
                    onChangeText={(text) => setStartYear(text)}
                    placeholder="Start Year: YYYY"
                  />
                </View>
                <View style={{ width: "10%" }} />
                <View style={{ width: "45%" }}>
                  <TextInput
                    multiline={true}
                    style={styles.inputTwo}
                    maxLength={250}
                    value={lastYear}
                    onChangeText={(text) => setLastYear(text)}
                    placeholder="End Year: YYYY"
                  />
                </View>
              </View>
            </View>
          ))}

表单尽可能多地呈现，但我存储的值不是动态的。

标签： formsreact-nativeuser-input