时间戳

首页 > 解决方案 > 如何使用反应显示嵌套元素

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

问题描述

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

一旦我创建了元素，我就在那里有一个选择选项，所以在选择特定选项时，我将再创建一个字段。

我有first name两个select age元素，我有年龄>18，<=18所以在此基础上我再创造一个领域。

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

我在做什么

所以我正在做的是当 onChange of select 我检查值是否> 18然后将状态设置为该值并显示新的输入字段，

问题

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

这是我的代码沙箱链接 在我的代码沙箱中我有工作代码，请检查

标签： javascriptreactjsreact-hooks

解决方案

我建议通过更新现有的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并跟踪其值一样。

推荐阅读