React中如何清空ref.current绑定的input输入框内容？

你当前拿到的是自定义组件最外层DOM节点的原因是：ref默认会挂载到类组件实例、函数组件返回的最外层DOM元素上。你可以通过以下几种方案实现清空内部input值的需求：

方案1：DOM层级查询（临时快速方案） #

如果你的StyledInput组件内部DOM结构长期固定，可以直接通过选择器找到内部input后修改值，不需要改造组件：

// 可根据你的实际结构更换选择器，比如querySelector('.input-inner')
const innerInput = loginField.current.querySelector('input');
if (innerInput) {
  innerInput.value = '';
  // 若为受控组件需要同步更新绑定的state：setFormValue('')
}

该方案依赖组件内部DOM结构，后续StyledInput结构调整后可能失效，仅适合临时调试或结构完全固定的场景。

方案2：改造StyledInput暴露内部能力（推荐长期方案） #

如果StyledInput是你团队可维护的组件，建议使用forwardRef+useImperativeHandle对外暴露指定方法或内部ref，调用更稳定：

改造自定义组件代码 #

import { forwardRef, useRef, useImperativeHandle } from 'react';

const StyledInput = forwardRef((props, outerRef) => {
  const innerInputRef = useRef(null);
  // 定义对外暴露的属性和方法
  useImperativeHandle(outerRef, () => ({
    // 方式1：直接暴露内部input的ref
    inputElement: innerInputRef.current,
    // 方式2：封装清空方法，外部调用更简洁
    clearValue: () => {
      innerInputRef.current.value = '';
    }
  }));

  return (
    <div className="input-wrapper">
      <input ref={innerInputRef} {...props} />
    </div>
  )
});

父组件调用方式 #

// 调用封装好的清空方法
loginField.current.clearValue();
// 或者直接操作暴露的input元素
// loginField.current.inputElement.value = '';

方案3：受控组件直接修改state（最符合React规范方案） #

如果这个输入框是受控组件（value绑定了state），不需要操作ref，直接修改绑定的state即可完成清空：

const [loginValue, setLoginValue] = useState('');

// 清空逻辑直接修改state
setLoginValue('');

受控组件的输入值完全由state驱动，不需要操作DOM，是React官方推荐的表单处理方式。

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