当前位置：首页 > React

react的refs如何取值

2026-03-10 16:33:07React

使用回调Ref获取值

在函数组件中，通过useRef钩子创建ref对象，并将其绑定到DOM元素或组件实例。ref对象的current属性会指向实际元素：

import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    console.log(inputRef.current.value); // 获取输入框的值
  };

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>获取值</button>
    </>
  );
}

类组件中的字符串Ref（已废弃）

旧版React支持字符串ref，但现已不推荐使用。若在遗留代码中遇到，可通过this.refs访问：

class MyComponent extends React.Component {
  handleClick = () => {
    console.log(this.refs.myInput.value); // 通过this.refs访问
  };

  render() {
    return (
      <>
        <input ref="myInput" type="text" />
        <button onClick={this.handleClick}>获取值</button>
      </>
    );
  }
}

转发Ref获取子组件DOM

使用React.forwardRef将ref传递给子组件的特定DOM元素，适用于封装高阶组件时：

const ChildComponent = React.forwardRef((props, ref) => (
  <input ref={ref} type="text" />
));

function ParentComponent() {
  const childRef = useRef(null);

  const handleClick = () => {
    console.log(childRef.current.value); // 获取子组件内部DOM的值
  };

  return (
    <>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>获取子组件值</button>
    </>
  );
}

动态绑定多个Ref

通过ref回调函数动态管理多个DOM元素的引用，适用于列表项：

react的refs如何取值

function ListComponent() {
  const itemsRef = useRef({});

  const handleClick = (id) => {
    console.log(itemsRef.current[id].textContent); // 获取特定列表项内容
  };

  return (
    <ul>
      {['A', 'B', 'C'].map((item) => (
        <li
          key={item}
          ref={(el) => (itemsRef.current[item] = el)} // 动态绑定ref
          onClick={() => handleClick(item)}
        >
          {item}
        </li>
      ))}
    </ul>
  );
}