Почему ничего не реагирует на вывод на консоль при вводе? - PullRequest
Новая
       2

Почему ничего не реагирует на вывод на консоль при вводе?

0 голосов
/ 19 февраля 2020

Это код реакции, который я сейчас использую: 

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» на терминал при нажатии кнопки подтверждения, однако он не отображается. Кто-нибудь может мне помочь?

Ответы [ 2 ]

2 голосов
/ 19 февраля 2020

<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.

1 голос
/ 19 февраля 2020

Чтобы обработать событие отправки, вы должны использовать элемент <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;

См. Документы форм реагирования

...