一个 onClick-React.js 的两个动作

Question

在我的 react 应用程序中，我有一个 button(Reset) 和 onClick 属性，我想在单击 button 时同时发生一些事情。

onClick 属性是否有任何方式可以导致多个操作运行 -

1. 再次在屏幕上显示所有学生（以及详细信息）......
2. 清除文本框的值并将其设置为默认状态，即要求最终用户输入内容。

我尝试了什么：

<input
  type="submit"
  value="Reset"
  onClick={() => {
    setSearchStu(student);
    document.getElementById("myTextbox").value = "";
  }}
/>;

这是上面代码的工作实现。

setSearchStu(student); 正在重置屏幕上所有学生的数据，document.getElementById("myTextbox").value = ""; 正在将值设置为空。

但是这段（上面写的）代码只显示学生数据而不清除文本字段。

关于从 input 标记中删除 setSearchStu(student);，类似于：

<input
  type="submit"
  value="Reset"
  onClick={() => {
    document.getElementById("myTextbox").value = "";
  }}
/>;

在清除现有值并将textBox 设置为空以再次输入内容方面工作正常。但这对我来说没有任何意义。

那么我怎样才能同时完成这两项任务呢？

“我的文本框”输入

<input
  type="text"
  value={userInput}
  onChange={(e) => setUserInput(e.target.value)}
  placeholder="Search here"
  id="myTextbox"
/>;

Answer 1

您需要将您的文本框值移动到状态并在那里操作它。因为当您使用 DOM 设置值时，react 不会调用渲染并且您的组件会离开之前的视图

Answer 2

您没有在问题中显示您的“myTextbox”输入 DOM，无论如何您需要像这样为其添加 value 和 onChange 道具：

<input 
 type="text" 
 value={myText} 
 onChange{(event) => setMyText(event.target.value)} />

你需要在你的组件中添加这个 React 状态：

const [myText, setMyText] = React.useState("")

编辑 将输入按钮更改为：

<button
  type="submit"
  value="Reset"
  onClick={() => {
    setUserInput("");
  }}
/>;

如果由于文本输入位于不同的组件中而无法实现这一点，那么您有一些选择：

• 如果它位于子组件中，则将 myText 和 setMyText 作为道具传递给子组件，并像 props.myText 和 props.setMyText 一样使用它们。
• 如果输入字段和按钮位于完全不同的组件中，那么我建议您学习像 Redux.js 之类的全局状态管理系统...

Answer 3

您可以使用单独的函数通过单个 onClick() 实现两个操作。

const searchAndClear=()=>
{
setSearchStu(student);
document.getElementById("myTextbox").value = "";
}

<input
  type="submit"
  value="Reset"
  onClick={searchAndClear}
/>;