一个表单中有两个按钮，如何只绑定一个按钮提交

Question

在React应用程序中，我遇到了一种情况，我只需要将两个按钮中的一个绑定起来就可以形成提交任务。现在，两个按钮都提交了我的数据。这里有一些代码：

<div>
<h2>create a new anecdote</h2>
<form onSubmit={handleSubmit}>
<div>
content 
<input {...content} />
</div>
<div>
author
<input {...author} />
</div>
<div>
url for more info
<input {...info} />
</div>
<button  onClick={()=> {
props.setNotification(content.value);
setTimeout(() => {
props.setNotification('')
}, 5000)
}}>
create
</button>
<button onClick={handleReset}>Reset</button>
</form>

</div>

我试着把"；重置"；按钮在形式之外。但是，我的按钮会放在同一条线上，一个在另一个上面。我需要"重置"按钮在表单中，这样它们就可以自然地挨着坐着。

更多代码：

const CreateNew = (props) => {
const content = useField('content')
const author = useField('author')
const info = useField('info')
const navigate = useNavigate()

const handleSubmit = (e) => {
if (content.value === '' || author.value === '' || info.value === '') {
return 
}
e.preventDefault()
props.addNew({
content: content.value,
author: author.value,
info: info.value,
votes: 0
})
navigate('/')
}
const handleReset = (e) => {

if (content.value === '' || author.value === '' || info.value === '') {
return 
}

e.preventDefault()
props.addNew({
content: content.onReset(''),
author: author.onReset(''),
info: info.onReset(''),
votes: 0
})
}

使用上面的代码，我创建了一个错误，在那里我可以清除输入框，但碰巧我在Rest上点击了一次，意外地提交了一个空数据

Answer 1

显式设置按钮类型：<button type="button" onClick={handleReset}>Reset</button>
这很有效，因为它覆盖了默认的按钮类型"提交"；。

Answer 2

给定type="提交"；到您要绑定以形成提交的按钮。查看