Question

在输入字段中输入时，我试图隐藏div。我要寻找的功能是在键入时隐藏div，并在所有输入都退格的情况下取消隐藏。

我的问题是，当我键入一个字母时，它会隐藏，但在按下下一个键时，它会显示。我正在努力寻找一个不会切换“ TEST” div的事件处理程序（我尝试过一些these）。我可以使用事件处理程序执行此操作，还是需要处理更具体的功能？

JS：

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [isTyping, setIsTyping] = useState(true);
  const hide = () => setIsTyping(!isTyping);
  return (
    <div className="App">
      First name: <input type="text" name="fname" onKeyPress={hide} />
      <br />
      <br />
      <div className={isTyping ? "block" : "hide"}> TEST </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我是新来的反应者，仍然在解决问题。

Answer 1

我认为您可以这样做：

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

这是更新的链接：https://codesandbox.io/s/stoic-mendel-bo9i1?fontsize=14

Answer 2

不确定是否可以，但是希望这可以给您一个想法！（无法反应的人）https://codesandbox.io/s/busy-knuth-7hs4z

隐藏元素时是否有办法防止切换输入文本

2 个答案: