当前位置：首页 > React

react如何操作引用页面的值

2026-01-25 20:10:19React

获取引用页面的值

在React中，可以通过useRef钩子或createRef方法创建引用（ref），用于直接访问DOM节点或React组件实例。以下为具体实现方式：

使用函数组件与useRef

import React, { useRef } from 'react';

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

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

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

使用类组件与createRef

import React, { createRef } from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = createRef();
  }

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

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

传递Ref给子组件

若需操作子组件的DOM节点或方法，需使用forwardRef转发ref：

子组件（使用forwardRef）

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

父组件

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

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

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

回调Ref的使用

早期React版本或需要动态设置ref时，可使用回调形式的ref：

function CallbackRefExample() {
  let textInput = null;

  const setTextInputRef = (element) => {
    textInput = element;
  };

  const handleClick = () => {
    console.log(textInput.value); // 通过回调ref获取值
  };

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