Question

我的组件看起来像这样

const onkeychange = async (e) => {
    setState({ ...state, textValue: e.target.value })
    if (delay !== false) {
        clearTimeout(delay)
    }
    let string = e.target.value
    if (string.trim() == '') {
        setState({ ...state, issearching: false })
    }
}
<input
    type="text"
    autoComplete="off"
    name="search"
    placeholder="Search for a Product, Brand or Category"
    value={state.textValue}
    className="search"
    onChange={onkeychange}
/>

问题是，当我在输入中输入某些内容后。然后尝试删除所有内容，除了最后一个字符，我无法删除所有内容。例如：我在输入中输入hello。尝试使用退格键删除它，我可以删除ello但不能删除h

Answer 1

您要检查的是string === ''和大小写true是否使用旧的state设置state，其中旧的string包含{删除最后一个字符，这就是为什么您不能删除最后一个字符。您应该删除condition

const onkeychange = async (e) => {
    setState({ ...state, textValue: e.target.value })
    if (delay !== false) 
        clearTimeout(delay)

}

Answer 2

在更新状态时，请使用setState的函数形式来获取最新状态。另外，我建议您在这里考虑使用异径钩。

  const onkeychange = async e => {
    const value = e.target ? e.target.value : "";
    setState(currentState => ({ ...currentState, textValue: value }));
    if (delay !== false) {
        clearTimeout(delay)
    }

    if (value.trim() === "") {
      setState(currentState => ({ ...currentState, issearching: false }));
    }
  };

Answer 3

setState是异步的，您可以在setState中使用回调以获取正确的preState来解决此问题。

const string = e.target.value;

setState((prevState) => {
   return { ...prevState, textValue: string }
})

if (delay !== false) {
   clearTimeout(delay)
}

if (string.trim() === '') {
   setState((prevState) => {
     return ({ ...prevState, isSearching: false })
    })
}

或更简单的方法是只运行一次setState。

 const string = e.target.value
 if (delay !== false) {
      clearTimeout(delay);
 }
 const isSearching = string.trim() !== "";
 setState({ ...state, textValue: string, isSearching});

atexit()

反应钩子无法清除输入值

3 个答案: