為什么在提交輸入時不向控制台輸出任何內容？

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 表單文檔