Почему e.preventDefault () не работает в React? - PullRequest
Новая
       27

Почему e.preventDefault () не работает в React?

2 голосов
/ 03 апреля 2019

Основной код ниже, но форма отправляется и перезагружается. Почему? 

import React from 'react';

class TestSubmitComponent extends React.Component {
    constructor(props) {
        super(props);
    }


    formSubmitHandler = (e) => {
        e.preventDefault(); //should prevent submit, and continue below?
        console.log(e);

        console.log('hello world ! why this does NOT show in console?!')
        return false;
    }


    render() {
        return(
            <form method="POST" action="/">
                <div onSubmit={this.formSubmitHandler}>
                    <h1>Select a file to upload</h1>

                    <input type="file" accept=".txt" name="ctlFileInput"></input>

                    <p/>
                    <input type="submit" value="Click to submit" />
                </div>
            </form>
        )
    }
}

export default TestSubmitComponent;

Ответы [ 2 ]

2 голосов
/ 03 апреля 2019

Ваш formSubmitHandler() метод фактически не срабатывает , поэтому поведение обновления страницы по умолчанию происходит при каждой отправке формы, поскольку обратный вызов onSubmit() должен быть привязан к ваш form элемент: 

 <form onSubmit={this.formSubmitHandler}>

Кроме того, я бы удалил запрос POST на маршрут / на вашем сервере. Это определено в вашем элементе form, но это нежелательно, так как это будет вызывать ваш сервер вместо того, чтобы вызывать ваш formSubmitHandler() метод . Может быть, вы могли бы попробовать что-то вроде: 

import React from 'react';

class TestSubmitComponent extends React.Component {
    constructor(props) {
        super(props);
    }


    formSubmitHandler = (e) => {
        e.preventDefault(); //should prevent submit, and continue below?
        console.log(e);
        console.log('hello world ! why this does NOT show in console?!')
        return false;
    }


    render() {
        return(
            <form onSubmit={this.formSubmitHandler}>
                <div>
                    <h1>Select a file to upload</h1>

                    <input type="file" accept=".txt" name="ctlFileInput"></input>

                    <p/>
                    <input type="submit" value="Click to submit" />
                </div>
            </form>
        )
    }
}

export default TestSubmitComponent;

Надеюсь, это поможет!

0 голосов
/ 06 апреля 2019

onSubmit записывается как атрибут элемента div после формы, поэтому он не работает должным образом.Страница загружается после отправки формы, потому что событие отправки формы было неконтролируемым.

Если вы переместите его в элемент формы, оно будет работать.

Пример 

<form method="POST" action="/" onSubmit={this.formSubmitHandler}>
                <div>
                    <h1>Select a file to upload</h1>

                    <input type="file" accept=".txt" name="ctlFileInput"></input>

                    <p/>
                    <input type="submit" value="Click to submit" />
                </div>
            </form>
...