无法在ReactJS和引导中重置窗体上的输入值

提交后，我无法将选择输入重置为默认占位符值。当我将所有内容都放在一个文件中时，这种方法是有效的，但在重构以分离组件之后，它不再适用于这样的重置

这是我的应用程序：

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;

下面是组件：

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:，CurrentlyInsurance:，Agrange:}中的代码从未被命中

---

如何将默认值传递回状态以重置表单

您没有向表单传递正确的属性。正如我所见，它需要一些变量，如

zipcode:， 目前投保：， Agrange： …从父组件中删除，以便在重置这些组件时进行更新，当然也可以进行设置

例如：

<Form 
   toggle={this.toggle}
   handleChange={this.handleChange}
   handleSubmit={this.handleSubmit} modalMessage={this.state.modalMessage}  
   showModal={this.state.showModal} 
   isDisabled={!this.isDisabled()}
   zipcode={this.state.zipcode}
   currentlyInsured={this.state.currentlyInsured}
   ageRange={this.state.ageRange}
/>

---

您需要从事件中检索值，请参阅本文：