javascript - 如何在 React 中使用数据添加动态字段(Hooks)

Question

我有这个布局

期望的行为

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

<小时/> <小时/>

这是我目前拥有的代码。

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 Hook 中。

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

提前谢谢

Answer 1

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

我认为您不需要比较状态，只需要行状态。 行状态应该是一维数组(不是二维)

• state 应该用一个空字符串初始化 const [rows,setRows] = useState([''])
• 渲染输入时，如果索引> 0，则应禁用输入。
• 当按下+按钮时，您需要在开头添加一个新行 setRows['',...行]

• 在你的handleChange函数上只需确保你正在替换 数组，以便组件将重新渲染。类似的东西

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

希望对你有帮助