reactjs - React，表单刷新问题，不阻止默认行为

问题描述

这个问题与React 有关，表单刷新问题（抱歉重复）。但事情<form onSumbit={ validation }没有被触发。这是我想要达到的结果的简短解释。我创建了一个表单，用户将在其中输入电子邮件和文本。单击Submit按钮时 - 数据通过 SmtpJS 发送。虽然，当我输入数据时 - 表单重新加载（表单，而不是整个页面）。我试图控制onSubmit表单的事件，但它仍然重新加载。为什么？

import React, { Component, lazy, Suspense } from 'react';
import './App.css';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
// other components' imports
import { OnlineReception } from './components/OnlineReception/OnlineReception';

export default class App extends Component {
  state = {
    ...
    // feedback form
    formData: {
        host: "smtp.mailtrap.io",
        recipient: "recipient@gmail.com", // email is an example here
        sender: "",
        text: "",
        subject: "Feedback",
        token: ""
    }
  }

  // send email with data
  // from Online Reception's
  // component form

/*
  sendEmail = () => {
    window.Email.send({
        Host : this.state.formData.host,
        Username : "someUsername", // for local testing
        Password : "somePassword", // for local testing
        To : this.state.formData.recipient,
        From : this.state.formData.sender,
        Subject : this.state.formData.subject,
        Body : `<html>${this.state.formData.text}</html>`
    }).then(
      message => alert(message)
    )
  };
*/

  // changing sender & message input values

  toggleChangeSender = async (event) => {
    
    await this.setState({
        ...this.state,
        formData: {
            host: this.state.formData.host,
            recipient: this.state.formData.recipient,
            sender: event.target.value,
            text: this.state.formData.text,
            subject: this.state.formData.subject,
            token: this.state.formData.token
        }
    });
    
    console.log("sender - ", this.state.formData.sender);
  }

  toggleChangeText = async (event) => {
    
    await this.setState({
        ...this.state,
        formData: {
            host: this.state.formData.host,
            recipient: this.state.formData.recipient,
            sender: this.state.formData.sender,
            text: event.target.value,
            subject: this.state.formData.subject,
            token: this.state.formData.token
        }
    });
    
    console.log("text - ", this.state.formData.text);
  }


  render() {
    return (
      <BrowserRouter>
        <div className="App">
          ...
            <Switch>          
              ...
              <Route path="/online-reception/" component={
                () =>
                  <OnlineReception
                    formData={ this.state.formData }
                    onChangeSenderData={ this.toggleChangeSender }
                    onChangeTextData={ this.toggleChangeText }
                  />
              } />

            </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

带有表单的 OnlineReception 组件

import React from 'react';
import './css/OnlineReception.css';

export const OnlineReception = (props) => {

    let { formData } = { ...props };

    const validation = (e) => {
        e.preventDefault();

        console.log("validation called");
        console.log("formData - ", formData);
    };

    return (
        <div className="OnlineReception">
            <h3 className="title">
                Feedback
            </h3>
            <form className="feedback"
                onSubmit={ validation }
            >    
                <div className="wrapper">
                    <label>
                        Email
                    </label>
                    <input
                        type="email"
                        name="replyto"
                        className="field"
                        placeholder="Example: yourname@gmail.com"
                        autoComplete="off"
                        value={ formData.sender }
                        onChange={ props.onChangeSenderData }
                    />
                    <label>
                        Message
                    </label>
                    <textarea
                        name="message"
                        className="field text-body"
                        placeholder="Text here"
                        value={ formData.text }
                        onChange={ props.onChangeTextData }
                    />
                    <div className="buttonBox">
                        <button className="submit"
                            type="submit"
                        >
                            Submit
                        </button>
                    </div>
                </div>
            </form>

        </div>
    )
};

标签： reactjs

reactjs - React，表单刷新问题，不阻止默认行为

问题描述

解决方案

推荐阅读