即使未单击提交按钮，表单 onSubmit 也会触发

Question

我有一个包含不同字段等的部分，它们基本上只是我需要获取数据时的参数。

所以基本上结构是这样的：

<form onSubmit={fetchData}>
   some parameter fields
</form>

例如，可以更改的参数之一是日期，我可以通过将今天的日期减去或增加一天来实现，例如：

<button onClick={decreaseDate}>
  -
</button>
<input
  type="number"
  max="1"
  value={incrementDate}
  onChange={onChangeDate}
/>
<button onClick={increaseDate}>
  +
</button>

其中：

const [incrementDate, setIncrementDate] = useState(0);

const increaseDate = () => {
  setIncrementDate(incrementDate + 1);
};

const decreaseDate = () => {
  setIncrementDate(incrementDate - 1);
};

const onChangeDate = ({ target }) => {
  const { value } = target;

  const attemptedParse = parseInt(value);

  if (!Object.is(NaN, attemptedParse)) {
    setIncrementDate(attemptedParse);
  }
};

所以基本上这会更改我单击提交按钮时需要获取的数据的日期：

<button type="submit">
  Get data
</button>

据我所知，fetchData 函数除了在 form 的 onSubmit 之外没有被调用。但是，问题是，每当我单击减少或增加时，都会使用新的日期值获取新数据。所以我不需要点击提交按钮，它只是自动获取新数据。在这种情况下，这不是故意的。我真的很喜欢它在我单击提交按钮时获取新数据。

我是不是哪里做错了，还是...？

Answer 1

这是简单的修复方法：

    <button type="button" onClick={decreaseDate}>
      -
    </button>
    <input type="number" max="1" value={incrementDate} onChange={onChangeDate}/>

    <button type="button" onClick={increaseDate}>
      +
    </button>

让我知道它是否有效。

即使未单击提交按钮，表单 onSubmit 也会触发

Form onSubmit triggers even when submit button is not clicked

forms

reactjs