如何創建動態添加輸入字段

Question

當用戶輸入輸入時，我正在嘗試創建一個動態添加輸入字段，添加按鈕將可用於單擊。 單擊添加后，它將出現另一個輸入字段。

這是它的樣子：

這是我已經實現的：

  const [inputs, setInputs] = useState(
    teamData.rules.map((value) => ({
      value,
      guid: uuidV4(),
    }))
  );

  const addInputs = (event) => {
    event.preventDefault();
    setInputs((inputs) => [
      ...inputs,
      {
        name: `rule_${inputs.length + 1}`,
        guid: uuidV4(),
      },
    ]);
  };
  const removeInputs = (index) => {
    const newList = inputs.filter((item, i) => index !== i);
    setInputs(newList);
  };
  const clearInput = (dataName) => {
    setUpdateTeamData((prevState) => {
      delete prevState[dataName];
      return {
        ...prevState,
      };
    });
  };

<div>
  {inputs?.map((data, idx) => {
    return (
      <div className="agreement-form-grid" key={data.guid}>
        <button
          type="button"
          className="agreement-remove-button"
          onClick={() => {
            removeInputs(idx);
            clearInput(`rule_${idx}`);
          }}
        >
          <Remove />
        </button>
        <input
          name={`rule_${idx}`}
          onChange={handleChange}
          placeholder={`Rule ${idx + 1}`}
          defaultValue={teamData.rules[idx]}
        />
      </div>
    );
  })}

如何實現第一張圖片的功能？

Answer 1

你需要兩個變量。 一個是存儲已添加規則列表的數組，第二個是用於保存尚未添加到數組中的規則值的字符串：

const [rules, setRules] = useState([{ value: "test", id: 0 }]);
  const [preAddedRule, setPreAddedRule] = useState("");

然后，通過依賴這些函數，您可以向變量添加和刪除規則：

const handleRemove = (id) => {
    setRules(rules.filter((rule, i) => rule.id !== id));
  };
  const handleAdd = (id) => {
    setRules([...rules, { value: preAddedRule, id: rules.length }]);
    setPreAddedRule("");
  };
  const handleChange = (e) => {
    setPreAddedRule(e.target.value);
  };

只需記住在添加到數組后清除preAddedRule的值，以便為下一個規則做好准備。

最后，顯示所有規則、輸入和按鈕，如下所示：

{rules.map((el, i) => (
        <div>
          <input value={el.value} />
          <button onClick={() => handleRemove(el.id)}>delete</button>
        </div>
      ))}
      <input onChange={handleChange} value={preAddedRule} />
      <button onClick={() => handleAdd()}>Add</button>

沙盒