Reactjs 如何删除输入并清除该输入中的数据？

我试图创建一个按钮，添加更多的输入和删除输入，当它删除输入时，它也会清除输入中的所有数据，但问题是当我删除输入，但数据仍然保留。我怎样才能解决这个问题

以下是我的代码库：

const [inputs, setInputs] = useState(teamData.rules);

  useEffect(() => {
      setInputs(teamData.rules);
  }, [teamData]);

  // Add more input
  const addInputs = () => {
    setInputs([...inputs, { name: `rule-${inputs.length + 1}` }]);
  };

  // handle click event of the Remove button
  const handleRemoveClick = (index) => {
    const list = [...inputs];
    list.splice(index, 1);
    setInputs(list);
  };

  {inputs.map((data, index) => (
    <div className="agreement-form-grid" key={index}>
      <button
        className="agreement-remove-button"
        onClick={() => handleRemoveClick(index)}
      >
        <Remove />
      </button>
      <input
        type="text"
        defaultValue={teamData.rules[index]}
        name={`rule_${index}`}
        placeholder={`Rule ${index + 1}`}
        onChange={handleChange}
      />
    </div>
  ))}
  {inputs.length !== 4 && (
    <div className="team-agreement-add-rule">
      <button type="submit" onClick={addInputs}>
        <Add />
      </button>
    </div>
  )}

---

在父组件中定义另一个函数以清除数据，如下所示：

const clearInput = (dataName) => {
  setUpdateTeamData((prevState) => {
      delete prevState[dataName];
      return {
       ...prevState
      }
  });
}

在子组件中，在remove按钮的

onClick

中也调用此函数

 <button
    className="agreement-remove-button"
    onClick={() => { handleRemoveClick(index); clearInput(`rule_${index}`)}}
  >
    <Remove />
 </button>

{handleRemoveClick（index）；clearInput（`rule_${index}'）}
>

---

保存前，您可以忽略空输入

有人能帮我吗？非常感谢您这么多数据是指您在删除的输入ryt中键入的内容吗？当你点击索引2输入的删除按钮时，会发生什么？当我点击删除输入按钮时，它实际上删除了一个输入字段，但没有删除其中的数据。当我点击“保存”按钮时，数据仍然是静态的there@nathan，尝试这种方式，它应该可以工作``this.setState

？它像

setInput`？你的

handleChange

看起来怎么样？这应该是类似的行为，它应该设置为空字符串总是。对不起，迟回复@Amila我刚刚更新了我的handleChange在问题中。“你可以看一下吗？”内森也更新了答案

 <button
    className="agreement-remove-button"
    onClick={() => { handleRemoveClick(index); clearInput(`rule_${index}`)}}
  >
    <Remove />
 </button>