当前位置：首页 > React

react如何获取input

2026-02-26 11:46:51React

获取input值的几种方法

在React中获取input元素的值有多种方式，具体取决于组件的类型（受控或非受控）以及使用的React版本。以下是几种常见的方法：

受控组件方式 通过React的state管理输入值，每次输入变化时更新state：

import { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

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

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

非受控组件方式 使用ref直接访问DOM元素获取值：

import { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef();

  const handleClick = () => {
    alert(inputRef.current.value);
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Get Value</button>
    </>
  );
}

表单提交时获取 在表单提交事件中通过event对象获取：

function FormSubmit() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const value = e.target.elements.username.value;
    console.log(value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" />
      <button type="submit">Submit</button>
    </form>
  );
}

类组件中的使用 在类组件中可以使用createRef或回调ref：

react如何获取input

class ClassComponentInput extends React.Component {
  inputRef = React.createRef();

  handleClick = () => {
    console.log(this.inputRef.current.value);
  };

  render() {
    return (
      <>
        <input ref={this.inputRef} />
        <button onClick={this.handleClick}>Get Value</button>
      </>
    );
  }
}

选择哪种方法取决于具体需求：需要实时验证或控制输入时使用受控组件；只需要最终值时使用非受控组件可能更简单。