javascript - 为什么提交输入时 React 不向控制台输出任何内容？

Question

这是我当前正在使用的 react 代码:

import React, { Component } from 'react'

export class AddProduct extends Component {
    doSomething(){
        console.log('Hello')
    }
    render() {
        return (
            <div>
                <h3>Product name</h3>
                <input type="text" id="product"></input>
                <h3>Product price</h3>
                <input type="text" id="price"></input>
                <input type="submit" id="submit" value="Submit" onSubmit={(e) => {this.doSomething();}}></input>
            </div>
        )
    }
}

export default AddProduct

当按下提交按钮时，我期望在终端上输出“Hello”，但它没有显示。有人可以帮我吗？

Answer 1

<input>元素不会触发 submit单击时发生事件，即使在表单内也是如此:

document.querySelector('input').addEventListener('submit', () => {
  alert('submit event seen');
});

<form>
  <input type="submit">
</form>

不过，点击事件可以工作。改变

onSubmit={(e) => {this.doSomething();}}

至

onClick={(e) => {this.doSomething();}}

如果您的<input>恰好在表单内，您可以附加 submit而是监听表单。