javascript - 如何在 React with data (Hooks) 中添加动态字段

Question

我有这个布局

期望的行为

一开始只有一个输入。第一。它是空的。当我在其中输入内容并按“添加+”新输入时，该输入已创建，它被禁用并且它的值是我输入的第一个。然后第一个被清除并再次为空。我真的不知道怎么做这个。

---

---

这是我目前拥有的代码。

const FilterListInput = ({ data }) => {
  const [comp, setComp] = useState('');
  const [rows, setRows] = useState([[]]);

  console.log(rows);

  const handleChange = (e, index) => {
    rows[index] = e.target.value;
    setRows(rows);
  };

  return (
    <>
      <div className="filter__form__elements__element">
        <label htmlFor={data.name}>{data.labelName}</label>
        <For
          of={rows}
          render={(item, index) => (
            <>
              <Input
                name={item.name}
                placeholder={data.placeholder}
                onChange={(e) => handleChange(e, index)}
              />
            </>
          )}
        />
      </div>
      <Button title="ADD +" type="secondary" onClick={() => setRows([...rows, comp])} />
    </>
  );
};

我被困在这里，我不知道下一步该去哪里。目前，当我创建新输入时，我可以输入它，而第一个输入的数据会留在其中，这是我不想要的。另外我希望所有内容都保存在rows钩子中。

我不是要完整的代码。只是一些指导方针。

先感谢您

标签： javascriptreactjsjsx

Answer 1

据我了解您想要的行为-> 1.您想从一个空输入开始，当按下 + 按钮时，您想在列表的开头添加一个新的空输入。2. 应禁用除第一个以外的所有输入。

我认为您不需要 comp 状态，只需要 rows 状态。行状态应该是一维数组（不是二维）

• state 应该是 init 并带有一个空字符串const [rows,setRows] = useState([''])
• 在渲染输入时，如果 index > 0 输入应该被禁用。
• 按下 + 按钮时，您需要在开头添加一个新行 setRows['',...rows]

• 在您的 handleChange 函数上，只需确保您正在替换数组，以便组件重新呈现。就像是

  const handleChange = (e, index) => { const newRows = [...rows]; newRows[index] = e.target.value; setRows(newRows); };

希望能帮助到你