当前位置：首页 > React

react如何获取页面元素值

2026-01-25 08:28:40React

获取页面元素值的常用方法

在React中获取页面元素值有多种方式，以下是几种常见的方法：

使用ref 通过useRef或createRef创建引用，绑定到DOM元素上获取值。适用于表单元素或需要直接操作DOM的场景。

import { 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}>Get Value</button>
    </div>
  );
}

受控组件（推荐方式） 通过React的状态管理直接获取表单元素值。表单元素值由React state控制，通过onChange事件同步更新。

import { useState } from 'react';

function ControlledComponent() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = () => {
    console.log(inputValue);
  };

  return (
    <div>
      <input value={inputValue} onChange={handleChange} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

事件对象获取 通过事件处理函数的参数直接访问DOM元素值，适用于不需要长期存储值的场景。

function EventComponent() {
  const handleChange = (e) => {
    console.log(e.target.value);
  };

  return <input onChange={handleChange} />;
}

通过ID获取（不推荐） 直接使用DOM API的document.getElementById，这种方式违背React的设计原则，仅适用于特殊场景。

react如何获取页面元素值

function IDComponent() {
  const handleClick = () => {
    const value = document.getElementById('myInput').value;
    console.log(value);
  };

  return (
    <div>
      <input id="myInput" type="text" />
      <button onClick={handleClick}>Get Value</button>
    </div>
  );
}