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

Question

这是我目前使用的反应代码：

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侦听器附加到表单中。

Answer 2

为了处理提交事件，您必须使用<form />元素。

例子：

import React, { Component } from 'react'

class AddProduct extends Component {
    doSomething() {
        console.log('Hello')
    }

    render() {
        return (
            <form onSubmit={(e) => this.doSomething()}>
                <h3>Product name</h3>
                <input type="text" id="product" />
                <h3>Product price</h3>
                <input type="text" id="price" />
                <input type="submit" id="submit" value="Submit" />
            </form>
        );
    }
}

export default AddProduct;

查看 React 表单文档