带ref的TextArea/Input组件异常：赋值后鼠标悬停值消失

你直接通过ref修改DOM的value属性，这和React的状态管理机制冲突了。React会管控组件的渲染状态，当组件因为鼠标悬停触发重绘（比如样式更新）或者其他原因重新渲染时，会用React内部维护的状态值覆盖你手动修改的DOM值，导致内容消失。不管是TextArea还是Input组件，只要是React封装的表单组件，都会存在这个问题。

改用受控组件的方式，用React状态来管理输入框的值，代替直接操作DOM：

import React, { useState } from 'react';

// 声明状态变量管理输入框内容
const [inputValue, setInputValue] = useState('');

const onAddFeature = () => {
  // 通过状态更新输入框内容
  setInputValue(Math.random().toString(32));
};

// 渲染组件
return (
  <>
    <Textarea
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
      size="sm"
    />
    <Button
      onPress={onAddFeature}
      isIconOnly
      size="sm"
      variant="solid"
      color="primary"
    />
  </>
);

• 受控组件是React表单的标准用法，状态由React统一管理，能避免DOM和状态不一致的问题
• 如果非要用非受控组件，你可以给TextArea设置defaultValue，但点击按钮时还是建议通过状态更新，或者使用useRef结合current.value的同时确保组件不会因为其他原因重绘（但这种方式不推荐，容易引发其他问题）

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