表单 - 单击按钮时清除所有文本和其他组件元素

Question

我创建了一个带有 inputtext 字段、选择选项、单选按钮和 textArea 的简单表单。 我什至创建了 2 个按钮，一个用于提交，一个用于“清除”表单中的所有文本。 我可以从 inputfield 和 textarea 的文本中清除文本，我在 parentClass (Form.js) 中创建了一个回调函数，并从那里将数据作为道具发送到 TextArea.js 类

       <TextArea
          callbackFromParent={this.parentCallback}
        />

当我单击“全部清除”按钮时，textInput 字段和 textarea 会清除。所以我想以相同的方式实现“选择”选项和其他组件。 所以我在状态和回调函数（parentCallback）中创建了选择变量，再次设置选择 并将其作为道具作为 callbackFromParent 发送到组件，但随后我将状态中的道具值设置为：selectCountry: this.props.callbackFromParent，从 Select 组件我必须将其发送到 TextArea.js 组件因为“全部清除”按钮也有它的功能。 我被困在这一点上，不知道如何思考或实施它。我浏览了谷歌，但没有得到我正在寻找的答案。我想清除每个表单输入字段文本并重置选择选项、单选按钮等。 我会感激我能得到的所有帮助。提前致谢！

我的代码链接：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;

Answer 1

我注意到了一些东西并重新编写了您的代码，请在此处查看所有更改 https://codesandbox.io/s/reactforms-r6w6p?fontsize=14。我删除了一些字段以向您展示基本思想，之后您应该可以将其应用于其他字段。

解释：

• 首先要做的事情：react 应用程序只有一个状态，请确保您不会为每个组件创建一个状态（我删除了除Form 组件中的一个之外的所有状态），现在您只有一个事实来源.实际上你在index.js 中还有一个状态，所以你仍然需要做一个小的清理并将状态传递给你的Form 组件。我希望你明白了。
• 事件和值必须作为 props 从父组件传递到子组件（请参阅我如何为 Select 和 ButtonRow 完成此操作），然后必须像 this.props.myFunc() 那样调用它们。
• 通过属性value 和onChange 事件使您的select 可控（参见代码）。

如果不是您要的，请告诉我。

Answer 2

您可能想尝试更改：

<input type="submit" value="Submit" onClick={this.onSubmitHandler} />

到：

<input type="button" value="Submit" onClick={this.onSubmitHandler} />

默认情况下，“提交”会尝试提交数据并等待响应。将其设置为“按钮”类型的按钮不应再尝试提交。