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;

See React Form Docs

提交输入后，为什么不对控制台做出任何反应？

2 个答案: