为什么页面刷新按钮点击反应？

Question

你能告诉我为什么页面刷新按钮点击反应？我在输入字段中输入内容并按下按钮，我的页面被刷新 我想获取表单域的值 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;

Answer 1

提交事件后刷新页面是表单的标准行为。要阻止这种情况，您可以添加 event.preventDefault()

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

使用 Redux-Forms，为了获取 values 对象而不刷新页面，我们必须使用 Redux-form 为我们创建的事件处理程序。它是在我们将这样的 onSubmit 属性传递给 Form 组件时创建的：

<ContactRForm onSubmit={this.submit} />

有趣的是，该处理程序现在可以通过 handleSubmit() 属性使用，我希望它有自己的 event.preventDefault() 内置。

尝试将此添加到您的表单组件代码中：

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 函数相同的功能，并且页面不会刷新。 :)

Answer 2

您可以使用以下更改来实现此目的。

      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;

Answer 3

这是 HTML 表单在提交按钮上刷新页面的默认行为。您可以通过添加 event.preventDefault();

来停止刷新

更多详情可以阅读ReactJS Form documentation

handleSubmit = e => {
  event.preventDefault()
  // get form value by accessing target values
  console.log(e.target.firstName.value);
};