javascript - 按钮打破 react 形式

Question

我想在表单中添加按钮以动态添加输入。但是我发现，如果我在表单中添加了一个仅记录到控制台的按钮(并且当我尝试添加输入时)，它将记录日志，然后表单中断。我的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>
...
);

欢迎您提供任何帮助，让我知道我还应该提供什么其他信息。

Answer 1

我认为该按钮可激活表单中的“提交”。因此，您可以尝试一些方法。将属性type =“button”添加到您的按钮，和/或使用“.preventDefault()”。

const handleButton = (event) => {
  event.preventDefault()
  console.log(123)
}

<div style={{ marginTop:'10px' }}>
  <button type="button" onClick={handleButton}>Add Product</button> 
</div>