Reagieren Sie, bilden Sie ein erfrischendes Problem

Aug 24 2020

Hier ist eine kurze Erklärung, was ich damit erreichen möchte. Ich habe ein Formular erstellt, in das der Benutzer E-Mail und Text eingibt. Beim Klicken auf die SubmitSchaltfläche werden Daten über SmtpJS gesendet. Wenn ich Daten eingebe, wird das Formular neu geladen (Formular, nicht die gesamte Seite). Was ist los?

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

export default class App extends Component {
  state = {
    ...
    // feedback form
    formData: {
        host: "smtp.mailtrap.io",
        recipient: "[email protected]", // 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) => {
    event.preventDefault();
    event.stopPropagation();
    
    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) => {
    event.preventDefault();
    event.stopPropagation();
    
    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-Komponente mit einem Formular

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: [email protected]"
                        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>
    )
};

PS Ich habe versucht, das onSubmitEreignis des Formulars zu steuern , aber es wird immer noch neu geladen

Antworten

1 MayankPandeyz Aug 24 2020 at 09:08

Dies ist das Standardverhalten des Formulars, wenn Sie das Formular unter seiner Submit-Handler-Methode e.preventDefault()wie folgt verwenden möchten :