React, form yenileme sorunu

Aug 24 2020

Sonuç olarak elde etmeye çalıştığım şeyin kısa açıklaması burada. Kullanıcının e-posta ve metin gireceği bir form oluşturdum. SubmitDüğmeye tıklandığında - veriler SmtpJS aracılığıyla gönderilir. Yine de, veri girdiğimde - form yeniden yüklenir (tüm sayfa değil, form). Sorun nedir?

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>
    );
  }
}

Form içeren OnlineReception bileşeni

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>
    )
};

Not: onSubmitFormun olayını kontrol etmeye çalıştım , ancak hala yeniden yükleniyor

Yanıtlar

1 MayankPandeyz Aug 24 2020 at 09:08

Bu, formun varsayılan davranışıdır, eğer formu tutmak istiyorsanız, aşağıdaki e.preventDefault()gibi gönderme işleyicisi yöntemini gönderin :