如何不清除输入字段onClick

Question

我正在使用 React JS，我想为“Row”类型的文本框制作一个隐藏按钮，这样当我点击该框时，侧面会出现说明，Row 有这个结构

 <div>
    <form key={id}>
        <button
          className="name"
          type="submit"
          onClick={clickFunc} 
        >
          {data.text}
        </button>
      </form>
  </div>

其中 clickFunc 调用 enterMouseFunc，在另一个组件文件中调用时传入的函数：

const clickFunc = useCallback((e) => {
    e.preventDefault();
    enterMouseFunc(e, data);
  });

在描述框中，有一个输入框，

// some other details here
<form key={id} onClick={inputClick}>
   <input
    type="text"
    className="inputParam"
    name={id}
    onChange={handleChange}
    />
   <button
    type="submit"
    style={{ display: "none" }}
    ></button>
</form>

我的输入点击：

const inputClick = (e) => {
    e.preventDefault();
  };

我的handleChange：

const handleChange = (e) => {
    e.preventDefault();
    setParameters({ name: e.target.name, value: e.target.value });
  };

效果很好。但是，每当我再次单击该行或在其他行之间切换时，所有用户的输入都会被清除。由于我已经禁止此行为，因此页面不会刷新，但输入仍会被删除。如何阻止它一直清除输入？

编辑： 这就是界面的样子，其中灰色框的类型为 Row。当我们单击这些框时，描述将出现在右侧，如图所示：

Answer 1

您是否有机会触发表单的onSubmit？您阻止inputClick，但不阻止提交。但是，我不确定它会被调用。为什么有一个隐藏的提交按钮？

Answer 2

setParameters 是否包含所有字段值？如果是这样，您应该在重新分配名称和值之前复制现有值。如果不是，问题就出在其他地方。

如果是这种情况，修复将如下所示：

const handleChange = (e) => {
    e.preventDefault();
    setParameters({...parameters,  name: e.target.name, value: e.target.value});
  };

Answer 3

除非您想提交表单，否则您不一定需要<form> 元素？

此外，在该元素（而不是按钮）上有一个 click 事件处理程序并不常见，我并不完全惊讶它会导致副作用。

我要做的是删除不提交的表单：仅在 change 事件上触发 setState/setReducer 的独立输入。

那么你应该能够移除隐藏按钮、preventDefault 调用等。

关于值的清理，我怀疑您在 key 属性中的 id 值发生了变化，这将导致重新挂载 form 子项。