버튼을 클릭하면 모든 텍스트 및 기타 구성 요소 요소를 양식 지우기

inputtext 필드, 선택 옵션, 라디오 버튼 및 textArea가있는 간단한 양식을 만들었습니다. 제출 용 버튼과 양식의 모든 텍스트를 '지우기'용으로 하나의 버튼도 만들었습니다. inputfield와 textarea의 텍스트에서 텍스트를 지울 수 있으며 parentClass (Form.js)에 콜백 함수를 만들었으며 거기에서 데이터를 TextArea.js 클래스에 소품으로 보냈습니다.

       <TextArea
          callbackFromParent={this.parentCallback}
        />

그리고 '모두 지우기'버튼을 클릭하면 textInput 필드와 텍스트 영역이 지워 지므로 '선택'옵션과 다른 구성 요소에 대해 동일한 방식으로 구현하려고 생각했습니다. 그래서 상태 및 콜백 함수 (parentCallback)에서 select 변수를 생성하고 select를 다시 설정하고 callbackFromParent로 구성 요소에 props로 보냈지 만 상태에서이 props 값을 다음과 같이 설정합니다. selectCountry : this.props.callbackFromParent, 선택 구성 요소에서 '모두 지우기'버튼과 기능이 있으므로 TextArea.js 구성 요소로 보내야합니다. 나는이 시점에 갇혀 있고 그것을 어떻게 생각하고 구현하는지 정확히 알지 못한다. Google을 통해 살펴 보았지만 원하는 답을 얻지 못했습니다. 각 양식 입력 필드 텍스트를 지우고 선택 옵션, 라디오 버튼 등을 재설정하고 싶습니다. 제가받을 수있는 모든 도움에 감사 할 것입니다. 미리 감사드립니다!

내 코드 링크 : https://codesandbox.io/s/reactforms-w1y38

Form.js:

import React from "react";
import Select from "./Select";
import SelectGender from "./RadioButton";
import TextArea from "./TextArea";

class Form extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: "",
      select: ""
    };
  }

  onChange = e => {
    this.setState({
      value: e.target.value
    });
  };

  //Child to Parent — Use a callback and states
  // OR WE CAN SAY THAT PARENT NEED data FROM CHILD AND WE DO :
  parentCallback = () => {
    this.setState({
      value: "",
      select: ""
    });
  };

  render() {
    return (
      <div>
        <h3>Child form</h3>
        <label>Enter name: </label>
        <input type="text" value={this.state.value} onChange={this.onChange} />
        <p>You Entered: {this.state.value}</p>

        <Select callbackFromParent={this.parentCallback} />
        <SelectGender />
        <br />
        <TextArea
          callbackFromParent={this.parentCallback}
          //Data passing from parent to child
          dataFromParent={this.state.value}
        />
      </div>
    );
  }
}

export default Form;

-------------------------

Select.js

import React from "react";

class Select extends React.Component {
  state = {
    selectGenderOptions: ["Male", "Female", "Others"],
    selectCountry: this.props.callbackFromParent
  };

  render() {
    console.log("Select props", this.props);
    return (
      <div>
        <label>
          {/* <select selectGenderOptions={this.state.selectGenderOptions} /> */}
          Select Gender:
          <select>
            <option value="select" selected className="text-hide">
              {" "}
              {/*//change the Css style if you dnt want to hide the text */}
              Please select
            </option>
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
          </select>
        </label>

        <label>
          <h3>Select Country</h3>
          <select>
            <option value="select" selected>
              {" "}
              Select Country{" "}
            </option>

            <option value="ind">India</option>
            <option value="pak">Pakistan</option>
            <option value="bang">Bangladesh</option>
            <option value="dub">Dubai</option>
            <option value="swe">Sweden</option>
            <option value="dan">Danmark</option>
            <option value="usa">USA</option>
            <option value="aus">Australia</option>
          </select>
        </label>
      </div>
    );
  }
}

export default Select;

-----------------------------
TextArea.js

import React from "react";

class TextArea extends React.Component {
  state = {
    textAreaValue: "",
    inputValue: ""
  };

  textAreaHandler = event => {
    this.setState({ textAreaValue: event.target.value });
  };

  onSubmitHandler = () => {
    return `Your comment ${this.state.textAreaValue}`;
  };

  clearAllHandler = e => {
    e.preventDefault();
    this.setState({
      textAreaValue: "",
      inputValue: this.props.callbackFromParent(this.state.inputValue)
    });
  };

  // sendDataFromChild = () => {
  //   this.props.callbackFromParent();
  // };

  render() {
    console.log("inputvalue", this.props);
    console.log("callback", this.props.callbackFromParent);
    return (
      <div>
        <label>
          <h3>Comment:</h3>
          <textarea
            value={this.state.textAreaValue}
            placeholder="Write anything"
            onChange={this.textAreaHandler}
          />
        </label>
        <div>
          <input type="submit" value="Submit" onClick={this.onSubmitHandler} />
          <button onClick={this.clearAllHandler}>Clear All</button>
        </div>
        <p>You wrote: {this.state.textAreaValue}</p>
        <p>Data Coming From Parent AS props: {this.props.dataFromParent}</p>
      </div>
    );
  }
}

export default TextArea;