Я не могу сбросить выбранные входы в значения заполнителя по умолчанию после отправки.Это работало, когда у меня все было в одном файле, но после рефакторинга для разделения компонентов, оно больше не работает со сбросом, как this.setState({zipcode: "", currentlyInsured: "", ageRange: "" })
Вот мое приложение:
import React from 'react';
import carimg from './images/cars.jpg';
import Form from "./Components/Form.js";
import './App.css';
class App extends React.Component {
state = {
showModal: false,
focusAfterClose: true,
modalMessage: "",
zipcode: "",
currentlyInsured: "",
ageRange: ""
};
handleChange = e => {
const { name, value } = e.target;
this.setState({ [name]: value });
};
handleSubmit = (e, zipcode, currentlyInsured, ageRange) => {
e.preventDefault();
// conditionals for message in reusable modal
if (currentlyInsured === "no") {
this.setState({
showModal: this.toggle,
modalMessage: "Sorry, no rates available"
});
}
if (ageRange === "over") {
this.setState({
showModal: this.toggle,
modalMessage: "Yes, we have great rates available!"
});
} else if (ageRange === "under") {
this.setState({
showModal: this.toggle,
modalMessage: "Coming soon!"
});
}
// reset form inputs
this.setState({ zipcode: "", currentlyInsured: "", ageRange: "" })
};
// toggle modal show and add event listener to close on click anywhere
toggle = () => {
if (!this.state.showModal) {
// attach/remove event handler
document.addEventListener("click", this.toggle, false);
} else {
document.removeEventListener("click", this.toggle, false);
}
this.setState(prevState => (
{ showModal: !prevState.showModal, focusAfterClose: !prevState.focusAfterClose}
));
};
isDisabled = () => {
return this.state.zipcode && this.state.currentlyInsured && this.state.ageRange
}
render() {
const { zipcode, currentlyInsured, ageRange } = this.state;
return (
<>
{/* create jumbotron header with background photo, text and form */}
<div className="container-1">
<div className="jumbotron">
<div className="header-text">
<h1>
Lower Your Auto
<br />
Insurance Rates
</h1>
<h5>Compare Rates to Save On Your Policy Today!</h5>
</div>
{/* Create Card */}
<div className="card">
<div className="card-body">
<div
className="card-title"
tag="h4"
style={{ fontStye: "strong" }}
>
<strong>Cheap Auto Coverage</strong>
</div>
<div className="card-title">
Complete just <strong>3 simple steps</strong> to
<br />
get quotes from top providers in your area.
</div>
{/* Form Component */}
<Form toggle={this.toggle} handleChange={this.handleChange} handleSubmit={e => this.handleSubmit(e, zipcode,
currentlyInsured, ageRange)} modalMessage={this.state.modalMessage} showModal={this.state.showModal}
isDisabled={!this.isDisabled()}
/>
{/* End form */}
</div>
</div> {/* end card here */}
</div> {/* end jumbotron here */}
</div> {/* end container-1 here */}
{/* container- 2 Body of page */}
<div className="container-2">
<div className="row">
<div className="col-6">
<h3>
We provide free quotes from top providers in your area in less
time.
</h3>
<div className="list">
<ul>
<li>Save time researching policies.</li>
<li>Get a fast response with no waiting.</li>
<li>Compare low-cost policies.</li>
<li>Save up to 30% on auto insurance.</li>
</ul>
</div>
</div>
<div className="col-6">
<div className="car-photo">
<img src={carimg} alt="cars" />
</div>
</div>
</div>
</div> { /* end of container-2 */ }
</>
);
}
}
export default App;
и вот<Form /> компонент:
import React from 'react';
import Modal from './Modal.js';
import { FiPhoneCall } from "react-icons/fi";
const phoneNumber = "555-555-5555";
const Form = props => {
console.log(props)
return (
<form
className="form"
onSubmit={e =>
props.handleSubmit(e, props.zipcode, props.currentlyInsured, props.ageRange)
}
>
<div className="form-group textarea">
<input
className="form-control textarea"
onChange={props.handleChange}
value={props.zipcode}
type="text"
name="zipcode"
id="zipcode"
placeholder="zipcode"
required
/>
<select
className="form-control textarea"
onChange={props.handleChange}
value={props.currentlyInsured}
name="currentlyInsured"
id="currentlyInsured"
placeholder="currently insured?"
required
>
<option value="" disabled selected>
Already insured?
</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<select
className="form-control textarea"
onChange={props.handleChange}
value={props.ageRange}
type="select"
name="ageRange"
id="ageRange"
required
>
<option value="" disabled selected>
Age Range
</option>
<option value="under">Under 25</option>
<option value="under">25 to 34</option>
<option value="over">35 to 44</option>
<option value="over">45 to 55</option>
<option value="over">over 55</option>
</select>
</div>
<button
type="submit"
className="btn btn-danger btn-lg"
data-toggle="modal"
data-target="#myModal"
onClick={props.toggle}
disabled={props.isDisabled}
>
<h5>Find Lower Rates</h5>
</button>
<div>
{props.showModal && <Modal modalMessage={props.modalMessage} />}
</div>
{/* call to speak to an agent button on resize */}
<button
id="callAgent"
style={{ marginTop: "20px" }}
type="button"
className="btn btn-info btn-lg"
>
<span style={{ marginRight: "25px" }}>
<FiPhoneCall />
</span>
<span style={{ marginLeft: "5px", color: "white" }}>
<a href={phoneNumber}>Talk to a Live Agent</a>
</span>
</button>
<p className="secure-text">
<small>Your information is safe and secure.</small>
</p>
</form>
);
}
export default Form;
Код в handleSubmit`: `this.setState({ zipcode: "", currentlyInsured: "", ageRange: "" }) никогда не вводится.
Как передать значения по умолчанию обратно в состояние для сброса формы?