Javascript 窗体在单击按钮时清除所有文本和其他组件元素

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

       <TextArea
          callbackFromParent={this.parentCallback}
        />

当我点击“全部清除”按钮时，textInput字段和textarea被清除。所以我想用同样的方法实现“选择”选项和其他组件。 所以我在state中创建了select变量，并在回调函数parentCallback中再次设置select 并将其作为props作为callbackFromParent发送到组件，但我将此props值设置为：selectCountry:this.props.callbackFromParent，从选择组件中，我必须将其发送到TextArea.js组件，因为“全部清除”按钮以及它的函数都在那里。 我被困在这一点上，不知道该如何思考或实施它。我已经通过谷歌搜索过了，但没有得到我想要的答案。我想清除每个表单输入字段文本并重置选择选项、单选按钮等。 我将非常感激能得到的一切帮助。提前谢谢

我的代码链接：

---

您可能希望尝试更改：

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

致：

---

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

您可能需要尝试更改：

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

致：

---

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

我注意到一些内容并重新编写了代码，请在此处查看所有更改。我删除了一些字段以向您展示基本思想，之后您应该能够将其应用于其他字段

说明：

第一件事：react应用程序只有一个状态，请确保不要为每个组件创建状态。我删除了所有状态，除了表单组件中的一个，现在您只有一个真实来源。实际上index.js中还有一个状态，所以您仍然需要进行一次小清理，并将状态传递给表单组件。我希望你明白了。 事件和值必须作为道具从父组件传递到子组件。请参见我如何为Select和ButtonRow执行此操作，然后必须像这样调用它们。props.myFunc。 通过代码中的属性值和onChange事件使您的选择可控。

---

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

我注意到一些内容，并重新编写了您的代码，请在此处查看所有更改。我删除了一些字段以向您展示基本思想，之后您应该能够将其应用于其他字段

说明：

第一件事：react应用程序只有一个状态，请确保不要为每个组件创建状态。我删除了所有状态，除了表单组件中的一个，现在您只有一个真实来源。实际上index.js中还有一个状态，所以您仍然需要进行一次小清理，并将状态传递给表单组件。我希望你明白了。 事件和值必须作为道具从父组件传递到子组件。请参见我如何为Select和ButtonRow执行此操作，然后必须像这样调用它们。props.myFunc。 通过代码中的属性值和onChange事件使您的选择可控。

---

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

我已尝试设置input type=按钮，但它是相同的。我的问题是我想清除inputfield中的所有文本，并在单击“全部清除”按钮时将复选框和选择选项设置为“重置”。谢谢我试图设置输入类型=按钮，但它是相同的。我的问题是我想清除inputfield中的所有文本，并在单击“全部清除”按钮时将复选框和选择选项设置为“重置”。谢谢非常感谢你的解释，我还没有试过，但我会很快让你知道。再次感谢！S我现在已经完成了表单，感谢您的帮助，当您这么说时，您仍然需要做一个小的清理，并将状态传递给您的表单组件。你到底是什么意思？我已经将索引状态设置为“title”，并将其作为道具传递到Form.js。还是你有别的意思。这是我代码的链接：你做得对，我说的清理是指，当前，你的状态在组件的表单本地状态中，如果你想显示表单组件之外的输入字段/单选按钮等的数据，你不能轻松地做到这一点。如果不需要这样做，只需坚持使用您的解决方案，否则，请查看并了解状态如何仅在顶级组件FilterableProductTable中使用，并传递给子组件代码，但在那里有点旧，但不是想法。S，我有一个问题，我创建了一个模式组件

---

单击“提交”按钮和其中所有字段值时显示的。到目前为止还不错，但当我点击“全部清除”按钮时，即使模态组件中的信息消失了，这是我不想要的。我想将信息保存在模态中，只需清除Html元素，如textinputm select、radiobutton等。我不明白为什么它会这样。我将非常感谢你的帮助。我的代码：请为此创建另一个问题，它似乎与当前问题无关。非常感谢您的解释，我还没有尝试，但我很快会让您知道。再次感谢！S我现在已经完成了表单，感谢您的帮助，当您这么说时，您仍然需要做一个小的清理，并将状态传递给您的表单组件。你到底是什么意思？我已经将索引状态设置为“title”，并将其作为道具传递到Form.js。还是你有别的意思。这是我代码的链接：你做得对，我说的清理是指，当前，你的状态在组件的表单本地状态中，如果你想显示表单组件之外的输入字段/单选按钮等的数据，你不能轻松地做到这一点。如果不需要这样做，只需坚持使用您的解决方案，否则，请查看并了解状态如何仅在顶级组件FilterableProductTable中使用，并传递给子组件代码，但在那里有点旧，而不是想法。S，我有一个问题，我创建了一个模式组件，单击“提交”按钮和其中的所有字段值即可显示该组件。到目前为止还不错，但当我点击“全部清除”按钮时，即使模态组件中的信息消失了，这是我不想要的。我想将信息保存在模态中，只需清除Html元素，如textinputm select、radiobutton等。我不明白为什么它会这样。我将非常感谢你的帮助。我的代码：请为此创建另一个问题，它似乎与当前问题无关

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