问对输入的每个字符反应不必要的提交

EN

传入console.log()，这样每次页面重新呈现时，函数都会被调用。就像你像这样传进去一样。

您需要像这样传递它：

onClick={() => console.log("Clicked")}

<input type="submit" className="text-success col-offset-3" onClick={console.log("clicked")} value="Add Stock"/>

这就是在每次呈现组件时调用console.log函数。这可能就是为什么您认为每次输入内容时表单都会被提交的原因。你应该这样做：

<input type="submit" className="text-success col-offset-3" onClick={() => console.log("clicked")} value="Add Stock"/>

您可以在React文档中找到更多信息：Handling Events。

说明：

这样做的原因是，在React中，您没有在事件中包含括号。所以在html中你会这样做：

Regular HTML:
<button onclick="myFunc()">Button</button>

但在React中，您需要执行以下操作：

JSX:
<button onClick={myFunc}>Button</button>

(请注意，在类组件中，可能需要使用this.myFunc)。

如果在React中使用括号，那么实际上是在运行这段代码时调用myFunc函数：

This is wrong:
<button onClick={myFunc()}>Button</button>

现在，如果函数需要一些参数，会发生什么呢？也就是说，你需要像123这样的号码来调用myFunc吗？这在文档中有介绍(请参阅Passing Arguments to Event Handlers )，有两到三种方法可以做到：

创建一个辅助函数来调用您想要调用的函数：

有点混乱，但我将其包括在内，因为它是一个有效的替代方案：

// Somewhere else in your component...
myAuxFunc = () => {
    myFunc(123)
}

// Inside your render...
<button onClick={this.myAuxFunc}>Button</button>

使用箭头函数：

这有点类似于创建一个辅助函数。实际上我们在做同样的事情，我们正在创建一个调用我们真正感兴趣的函数的函数，只是我们没有给它命名(它是一个匿名箭头函数)，我们在现场创建它：

<button onClick={() => myFunc(123)}>Button</button>

这可能很棘手，但它基本上与我提到的第一个替代方案相同。我告诉react，当按钮被单击时，我希望调用以下函数：() => myFunc(123)。它是一个不带参数的函数，当它被调用时，它将调用myFunc(123)。

类(类组件)使用bind this 函数绑定关键字：

当您想要调用组件中定义的函数时，这在类组件中很有用，因此为了完整性，我将其包含在这里。当您想要调用像console.log这样的函数时，它实际上并不有用。

<button onClick={this.myFunc.bind(this, 123)}>Button</button>