почему страница обновляется по нажатию кнопки в реакции? - PullRequest
Новая
       38

почему страница обновляется по нажатию кнопки в реакции?

1 голос
/ 11 июля 2019

подскажите, пожалуйста, почему страница обновляется при нажатии кнопки в реакции?Я ввожу что-то в поле ввода и нажимаю кнопку, моя страница обновляется. Я хочу получить значение поля формы https://codesandbox.io/s/green-frost-414qi

class ContactForm extends React.Component {
  handleSubmit = values => {
    // print the form values to the console
    console.log(values);
  };
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label htmlFor="firstName">First Name</label>
          <Field name="firstName" component="input" type="text" />
        </div>

        <button type="submit">Submit</button>
      </form>
    );
  }
}
const ContactRForm = reduxForm({
  // a unique name for the form
  form: "contact"
})(ContactForm);

export default ContactRForm;

Ответы [ 3 ]

4 голосов
/ 11 июля 2019

Это стандартное поведение для форм обновления страницы после отправки событий. Чтобы остановить это, вы можете добавить event.preventDefault()

  handleSubmit = event => {
    event.preventDefault()
    console.log(event.target.firstName.value); //get value from input with name of firstName
  };

В Redux-Forms, чтобы получить объект values и не обновлять страницу, мы должны использовать обработчик событий, который был создан для нас с помощью Redux-формы. Он создается, когда мы передаем реквизит onSubmit таким образом компоненту Form:

<ContactRForm onSubmit={this.submit} />

Интересно, что этот обработчик теперь доступен через реквизит handleSubmit(), который, как я ожидаю, имеет собственный встроенный event.preventDefault().

Попробуйте добавить это к коду компонента Form: 

import React from "react";
import { Field, reduxForm } from "redux-form";

class ContactForm extends React.Component {
  render() {
    return (
      <form onSubmit={this.props.handleSubmit}>
        <div>
          <label htmlFor="firstName">First Name</label>
          <Field name="firstName" component="input" type="text" />
          <label htmlFor="lastname">Last Name</label>
          <Field name="lastname" component="input" type="text" />          
        </div>

        <button type="submit">Submit</button>
      </form>
    );
  }
}
const ContactRForm = reduxForm({
  // a unique name for the form
  form: "contact"
})(ContactForm);

export default ContactRForm;

Теперь происходит та же функциональность, что и у исходной функции submit, и страница не обновляется. :)

0 голосов
/ 11 июля 2019

Это поведение HTML-форм по умолчанию для обновления страницы при нажатии кнопки отправки. Вы можете остановить обновление, добавив event.preventDefault ();

Для получения более подробной информации вы можете прочитать Документация ReactJS Form 

handleSubmit = e => {
  event.preventDefault()
  // get form value by accessing target values
  console.log(e.target.firstName.value);
};
0 голосов
/ 11 июля 2019

Вы можете добиться этого, используя следующие изменения. 

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

        this.state = {
          fieldValue : ''
        }
this.updateInput = this.updateInput.bind(this);

        this.handleSubmit = this.handleSubmit.bind(this);
        }

        updateInput(event){
this.setState({username : event.target.value})
}
          handleSubmit = event=> {
            // print the form values to the console
            event.preventDefault() // this is used to prevent the form submission
        console.log('Your input value is: ' + this.state.username) // your input field value

          };
          render() {
            return (
              <form>
                <div>
                  <label htmlFor="firstName">First Name</label>
                  <Field value={input} onChange={this.updateInput} /> // set the input value
                </div>

                <button type="submit" onClick={this.handleSubmit} >Submit</button>
              </form>
            );
          }
        }
        const ContactRForm = reduxForm({
          // a unique name for the form
          form: "contact"
        })(ContactForm);

        export default ContactRForm;
...