React输入组件状态不同步

Question

我有一个相当简单的任务，它应该是开箱即用的。但它没有。

具有重置值功能的输入字段。当输入有值并且点击关闭图标时，输入值应该重置。

isFocused的状态是由onFocus和onBlur道具调用setIsFocused并设置正确的值来处理的。

const [inputValue, setInputValue] = useState("");
const [isFocused, setIsFocused] = useState(false);
const handleOnClick = () => {
if (isFocused) {
setInputValue("");
}
};
const handleOnChange = (e) => {
setInputValue(e.target.value);
};
return (
<chakra.div className="App" p="20">
<ChakraProvider>
<InputGroup>
<Input
value={inputValue}
onChange={handleOnChange}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
/>
<InputRightElement onClick={handleOnClick}>
{inputValue.length && isFocused ? <CloseIcon /> : <SearchIcon />}
</InputRightElement>
</InputGroup>
</ChakraProvider>
</chakra.div>
);

代码如下:https://codesandbox.io/s/hardcore-shtern-1m5vo0?file=/src/App.js

关闭图标是可见的，当输入是聚焦。然而,当handleOnClick isFocused不是我所期望的价值。因此，该值永远不会被重置。

Answer 1

将onClick改为onMouseDown。看看这个答案。