时间戳

首页 > 解决方案 > 添加/删除类会导致输入内容消失

javascript - 添加/删除类会导致输入内容消失

问题描述

我有以下代码：

    <div
    className={classNames(styles["login"], {
      [styles["login-top"]]: moveControlsTo === MOVE_CONTROLS_TO.TOP,
      [styles["login-fixed"]]: !(moveControlsTo === MOVE_CONTROLS_TO.TOP),
    })}
  >
    <input
      type="text"
      id="freesearch-input"
      className={classNames(styles["freesearch-input"], styles["borders"])}
      autoComplete={"off"}
      onChange={handleOnChange}
      value={""}
    />
  </div>

一个带有输入的简单 div。问题是当这个 div 的类名从 login-top 更改为 login-fixed 或反之亦然时，输入值消失，我不希望这种行为。有解决方案吗？

标签： javascripthtmlcssreactjs

解决方案

内容会消失，因为每当状态更改时，您的组件就会重新渲染。您将输入字段的值设置为value={""}。因此它每次都加载空。只需为此输入元素创建一个状态并在更改时将其更改为。

const [inputVal, setInputVal] = useState("");

<input onChange={(evt)=>setInputVal(evt.target.val)} value={inputVal}>

现在，每当状态发生变化时，您的输入将始终显示inputVal价值。

推荐阅读