如何解决按钮打破反应形式
我想在表单中添加按钮以动态添加输入。但是我发现,如果我在表单中添加了一个仅记录到控制台的按钮(并且当我尝试添加输入时),它将记录日志,然后表单中断。我的Electron应用程序的前端窗口崩溃了(没有退出但变成灰色),并且在没有包含表单的对话框打开的情况下自动在同一页面上重新启动。
这是我的表单代码的片段:
TaskCreation.js
return (
<div className="modal-body">
{values.products.map((product,i) => {
return(
<div key={i}>
<Form.Row>
<Form.Group as={Col} controlId={"keywords-" + i}>
<Form.Label>Keywords (e.g. '+box +logo +tee')</Form.Label>
<Form.Control
value={product.keywords.join(' ')}
onChange={handleChange}
>
</Form.Control>
</Form.Group>
</Form.Row>
...
<div style={{ marginTop:'10px' }}>
<button onClick={() => console.log(123)}>Add Product</button> // this breaks when clicked
</div>
...
);
欢迎任何帮助,让我知道我还应该提供什么其他信息。
解决方法
我认为该按钮可以激活表单中的“提交”。因此,您可以尝试一些方法。将属性type =“ button”添加到您的按钮,和/或使用“ .preventDefault()”。
const handleButton = (event) => {
event.preventDefault()
console.log(123)
}
<div style={{ marginTop:'10px' }}>
<button type="button" onClick={handleButton}>Add Product</button>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。