Question

这里是简短的解释，我想以此作为结果。我创建了一个表单，用户可以在其中输入电子邮件和文本。单击Submit按钮时-数据通过SmtpJS发送。但是，当我输入数据时，表单会重新加载（表单而不是整个页面）。怎么了？

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: "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) => {
    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组件

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

P.S。我试图控制表单的onSubmit事件，但仍会重新加载

Answer 1

这是表单的默认行为，如果要保留表单，请在其提交处理程序方法下使用e.preventDefault()，例如：

handleFormSubmit = (event) => {
  e.preventDefault()
}

形式如下：

<form onSubmit={this.handleFormSubmit}>

Answer 2

这帮助我解决了问题-<Route path="/online-reception/" render={ ... }

反应，形式刷新问题

2 个答案: