表单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>

据我所知，除了在form的onSubmit中，fetchData函数没有被调用。然而，问题是，每当我单击"减少"或"增加"时，都会使用新的日期值获取新数据。因此，我不需要点击提交按钮，它只需自动获取新数据。在这种情况下并非如此。每当我点击提交按钮时，我真的只想让它获取新的数据。

我是不是做错了什么，还是。。。？

Answer 1

以下是简单的修复方法：

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

让我知道它是否有效。