Reactjs 在react hook中，如何清空状态并同时显示空输入？

在react hook中，如何清空状态并同时显示空输入？ 我的问题是，当我重置状态时，我的输入仍然是满的

    const [state, setState] = useState([initial])

     handleInputChange(event) {
        setState({
       event.target.value
        });
      }
    const resetState = () => {  
        setState([initial])
        }
export default function newState () {

return(
    <input onChange={handleInputChange()} />
    <button onClick={resetState}/>
)
};

const[state，setState]=useState（[initial]）
handleInputChange（事件）{
设定状态({
event.target.value
});
}
常量resetState=（）=>{
设置状态（[初始]）
}
导出默认函数newState（）{
返回(
)
};

你（我认为）的意思是：

export default function Foo({ initial }) {
  const [value, setValue] = React.useState(initial)

  return(
    <>
      <input onChange={(event) => setValue(event.target.value)} value={value} />
      <button onClick={() => setValue(initial)}>Reset</button>
    </>
  )
};

导出默认函数Foo（{initial}）{
常量[value，setValue]=React.useState（初始）
返回(
setValue（event.target.value）}value={value}/>
设置值（初始值）}>重置
)
};

---

您必须在组件内部调用

useState

。

第一个问题：您已将

状态初始化为数组，将其重置为数组，但将其更新为对象

始终保持数据类型的一致性，在这种情况下，这两种类型似乎都不合适。我建议只使用字符串值

const[state，setState]=useState（初始）
handleInputChange（事件）{
设置状态（事件、目标、值）；
}
常量resetState=（）=>{
设置状态（首字母）
}

请记住，
useState
更新程序与基于类的
setState
不同<代码>设置状态

合并以前的状态值和新的状态值<代码>使用状态替换。因此，如果您的状态不是对象，则更新调用

setState（{newState}）

不再正确

第二个问题：

不正确。此代码所做的是分配

onChange

调用

handleInputChange

返回的值。实际上，您需要的是将函数本身分配给

onChange

//否（）

---

第三个问题：您的状态钩子似乎不在功能组件内，并且它看起来不像是为用作自定义钩子而设置的（我可能错了）。将它们移到组件函数中。

感谢您提供代码，但“清空”状态是什么意思？您想要实现什么？

setState

用于经典组件，请格式化您的代码，这可能有助于其他人。很难从该代码中看出您想要实现什么，因为它是无效的。组件有两种类型：函数和类。你似乎在混合这两个概念，也许是从混合教程中复制？我看到已经有一些很好的答案试图澄清这一困惑，但总的来说，我建议阅读React关于这一问题的优秀文档。