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

Question

在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}/>
)
};

Answer 1

你的意思是：

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>
    </>
  )
};

您必须在组件内部调用useState。

Answer 2

第一个问题：您已将state初始化为数组，将其重置为数组，但将其更新为对象。

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

const [state, setState] = useState(initial)
handleInputChange(event) {
  setState(event.target.value);
}
const resetState = () => {  
  setState(initial)
}

请记住，useState更新程序与基于类的setState不同。setState合并以前的状态值和新的状态值。useState替换。因此，如果您的状态不是对象，则更新调用setState({ newState })不再正确。

第二个问题：<input onChange={handleInputChange()} />不对。此代码的作用是将调用handleInputChange返回的值分配给onChange。实际上，您想要的是将函数本身分配给onChange。

// no ()
<input onChange={handleInputChange} />

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