如何使用反应显示嵌套元素

Question

我正在创建动态元素，当用户单击 add 时，我正在创建另一组元素。

创建元素后，我有一个选择选项，因此在选择特定选项时，我将再创建一个字段。

我有first name 和select age 两个元素，我的年龄分别为>18 和<=18 所以在此基础上我再创建一个字段。

在这里，当我创建另一个字段时，我遇到了问题。

我在做什么

• 我正在循环我的元素

• 然后对于我将在选择时创建的新元素，我将进行条件渲染

  {onChangeAge && indexVal === index && (

所以我正在做的是，如果onchange选择我正在检查值> 18然后将状态设置为该值并显示新的输入字段，

• 但它没有按预期工作，当我在第一组元素中选择 >18 并在第二组中选择 <=18 时，它再次设置为 false。
• 那是因为indexVal === index 我不知道如何处理

问题

问题是当我选择年龄<=18 时，我正在显示一个输入字段，我又创建了一个element set，如果我再次选择<=18，那么我在第一个组件中创建的输入字段没有出现。

This is my code sandbox link在我的代码沙箱中我有工作代码，请检查

Answer 1

我建议要么通过更新现有的inputHolder 来跟踪年龄输入，要么通过单独的状态进行跟踪。应该是这样的：

更新onChange年龄

const onChangeAge = (e, ind) => {
    console.log(e.target.value);
    let val = e.target.value;
    console.log(typeof ind, ind, typeof val);
    let inputHolderCopy = [...inputHolder];
    setindexVal(ind);
    inputHolderCopy = inputHolderCopy.map((data) => {
      if (data.id === ind + 1) {
        return { ...data, currentSelectedAge: val };
      }
      return data;
    });
    setinputHolder(inputHolderCopy);

    if (val === "<=18 ") {
      console.log("Hello");
      setageVal(true);
    } else {
      setageVal(false);
    }
  }

现在只需检查这里：

{onChangeAge && li.currentSelectedAge === "<=18" && (
              <div>
                <input
                  type="text"
                  name={`data[${index}].idCred`}
                  id="idCred"
                  placeholder="ID"
                  ref={register({ required: "ID is required" })}
                />

                <br></br>
                <label htmlFor="idCred">Name</label>
              </div>
            )}

这里是演示：https://codesandbox.io/s/proud-river-5bg7o?file=/src/App.js:2093-2527

注意：这只是一种方法。你也可以用其他方式。就像在inputHolder 中创建变量并跟踪它的值。