如何重置textarea输入元素使其恢复带占位文本的初始状态？

你当前通过ref直接修改DOM值的方式虽然能清空内容，但不符合React的状态管理规范，更推荐使用受控组件的方式来实现，通过状态变量完全控制输入框的值，这样能保证React数据流的一致性，同时自然恢复占位文本的显示。

解决方案代码 #

import React, { useState } from "react";
import { Input } from "@chakra-ui/react";

export default function App() {
  // 用state管理输入框内容，初始值为空字符串
  const [inputValue, setInputValue] = useState("");

  const handleKeyDown = (e) => {
    if (e.code === "Enter") {
      // 重置状态为空，触发输入框清空
      setInputValue("");
      // 阻止回车默认的换行行为（可选，根据需求决定）
      e.preventDefault();
    }
  };

  return (
    <Input
      as="textarea"
      placeholder="按下回车后这个文本框应该清空"
      style={{ height: "300px" }}
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
      onKeyDown={handleKeyDown}
    />
  );
}

说明 #

• 受控组件模式下，输入框的value完全由inputValue状态控制，当按下回车时调用setInputValue("")重置状态，输入框会自动清空并显示占位文本。
• 相比直接操作DOM，这种方式能避免React状态与DOM实际值不一致的问题，更符合React的设计理念。
• 如果因特殊需求必须使用ref方式，只需确保清空inputRef.current.value后，无需额外操作，占位文本会在输入框为空时自动显示（但仍推荐优先使用受控组件）。

内容的提问来源于stack exchange，提问作者OMGItsRob