이 질문은 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: "[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) => {
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: [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>
)
};
그것은 나를 위해 일하는 것 같습니다. 그래도 React Router없이 시도해 보았는데, 그냥 직선적 인 구성 요소 였고 잘 작동했습니다. 귀하의 문제는 렌더링 소품 대신 구성 요소 소품을 사용하고 있다는 것입니다.
시험 <Route path="/online-reception/" render={ ...
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다