Javascript 有没有一种方法可以防止隐藏元素时切换输入文本

在输入字段中键入时，我试图隐藏

div

。我正在寻找的功能是在键入时隐藏div，如果所有输入都是退格的，则取消隐藏它

我的问题是，当我键入一个字母时，它会隐藏，但在下一次按键时，它会显示出来。我正在努力寻找一个不切换“TEST”

div的事件处理程序（我已经尝试了一些）。我可以用一个事件处理程序来处理它，还是需要处理一个更具体的函数


JS:

import React，{useState}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
函数App（）{
const[isTyping，setIsTyping]=useState（true）；
常量hide=（）=>setIsTyping（！isTyping）；
返回(
名字：




试验
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

我对反应还不熟悉，但仍在解决问题。
我想你可以这样做：

function App() {
  const [value, setValue] = useState('');
  const storeValue = (e) => setValue(e.target.value || '');
  return (
    <div className="App">
      First name: <input type="text" value={value} name="fname" onChange={storeValue} />
      <br />
      <br />
      <div className={value.length === 0 ? "block" : "hide"}> TEST </div>
    </div>
  );
}

函数应用程序（）{
const[value，setValue]=使用状态（“”）；
常量storeValue=（e）=>setValue（e.target.value | |“”）；
返回(
名字：




试验
);
}

下面是更新的链接：
不确定这是否有效，但希望这能给你一个想法！（NOT REACT GUY）
那么您希望div仅在输入值长度为0时可见吗？@dancantr基本上是的，当用户开始键入hide并在零或空时显示
function App() {
  const [value, setValue] = useState('');
  const storeValue = (e) => setValue(e.target.value || '');
  return (
    <div className="App">
      First name: <input type="text" value={value} name="fname" onChange={storeValue} />
      <br />
      <br />
      <div className={value.length === 0 ? "block" : "hide"}> TEST </div>
    </div>
  );
}