Javascript （React.js+；Hooks）单击按钮后如何重置输入字段？

我想做的是有一个用户可以输入的输入。单击按钮后，获取该输入并对其进行处理，然后使用连接到该输入的数据库执行一些后端操作。我试图通过一个状态钩子来实现这一点：onBlur，将输入保存到状态。单击按钮时，执行两项操作：1）获取状态变量并将其传递给后端解析程序；2）清除输入字段，使其为空，并且仅存在占位符文本

我有以下代码：

const [inputVal, setInputVal] = useState("");

updateInput = (e) => {
    const val = e.target.value;
    setInputVal(val);
}

sendData = async () => {
    //handle async backend processing with inputVal
    setInputVal("");
    //rerender
}


<Button className="input-button" onClick={sendData}>Send Data</Button>
<input className="input-field" placeHolder="Input name." defaultValue={inputVal} onBlur=(updateInput)></input>

const[inputVal，setInputVal]=useState（“”）；
更新输入=（e）=>{
const val=e.target.value；
设置输入值（val）；
}
sendData=async（）=>{
//使用inputVal处理异步后端处理
setInputVal（“”）；
//复卷机
}
发送数据

然而，我有两个问题

在单击按钮时，我想首先更新输入，然后处理按钮单击，因此它总是使用新值。但是，这似乎有一些问题，可能是由于sendData的异步性质造成的

虽然inputVal可能是一个空字符串，但出于某种原因，输入框中的值不会重置为零，而是保持原样（尽管内部数据仍然具有

inputVal=0

）。然后再更新输入值

---

首先，将defaultValue更改为

value={inputVal}

，因为它是一个受控输入。

---

其次，请详细说明1中的问题。

对于受控状态输入，最常用的方法是使用

onChange

而不是

onBlur

。这也可以避免与模糊和单击事件的冲突。您还可以将

inputVal

传递给

value

input的属性

  const [inputVal, setInputVal] = useState("");

  const updateInput = (e) => {
    const val = e.target.value;
    setInputVal(val);
  }

  const sendData = async () => {
    //handle async backend processing with inputVal
    setInputVal("");
    //rerender
  }

  return (
    <>
      <button className="input-button" onClick={sendData}>Send Data</button>
      <input className="input-field" onChange={updateInput} placeHolder="Input name." value={inputVal}/>
    </>
  );

const[inputVal，setInputVal]=useState（“”）；
常量更新输入=（e）=>{
const val=e.target.value；
设置输入值（val）；
}
const sendData=async（）=>{
//使用inputVal处理异步后端处理
setInputVal（“”）；
//复卷机
}
返回(
发送数据
);

首先，我尝试执行value={inputVal}，但似乎不起作用，因为我根本无法编辑输入中的任何内容。至于我关于1）的问题，单击按钮发送数据会触发onBlur事件和button click事件，后者是异步处理的，我希望确保更新输入的onBlur事件首先发生，尽管我想我已经解决了这一问题。实际上，我通过为event.target使用一个钩子并将其值设置为“”，绕过了2）的问题，但我仍然很好奇为什么使用value/defaultValue不起作用。我不知道您是否尝试更新inputs状态onBlur，但通常，您使用onChange处理程序更新受控输入的值，因此，每次键入字符时，状态都会更新。