能否通过Ref实现非受控输入框的实时值展示？

云原生阿岚

2026-7-12

非受控输入框结合Ref实现实时值展示的方案

可以通过非受控输入框结合Ref实现类似的实时值展示，但确实必须借助事件触发才能实现实时更新——因为非受控组件的输入值变化不会自动触发React组件重渲染，React不会主动跟踪它的状态变化，得靠事件捕获值的变动后再做处理。

下面提供两种常见实现方式：

1. 结合Ref与状态更新（保留React渲染逻辑）

这种方式里输入框是非受控的（不绑定value属性），用useRef获取输入框DOM元素，在输入事件中拿到最新值后更新状态，让<p>标签通过React渲染展示：

import { useState, useRef } from 'react';

const MyComponent = () => {
  const [displayValue, setDisplayValue] = useState('');
  const inputRef = useRef(null);

  const handleInput = () => {
    // 通过Ref获取输入框当前值
    setDisplayValue(inputRef.current.value);
  };

  return (
    <div>
      {/* 非受控输入框：不绑定value，仅用Ref引用 */}
      <input type='text' ref={inputRef} onInput={handleInput} />
      <p>{displayValue}</p>
    </div>
  );
};

2. 直接通过Ref操作DOM展示（无需组件重渲染）

如果不想触发组件重渲染，也可以直接通过Ref获取<p>标签的DOM元素，在输入事件中直接修改它的内容：

import { useRef } from 'react';

const MyComponent = () => {
  const inputRef = useRef(null);
  const displayRef = useRef(null);

  const handleInput = () => {
    // 直接修改DOM内容，跳过React渲染流程
    displayRef.current.textContent = inputRef.current.value;
  };

  return (
    <div>
      <input type='text' ref={inputRef} onInput={handleInput} />
      <p ref={displayRef}></p>
    </div>
  );
};