当前位置：首页 > React

react如何获取输入框值

2026-01-25 16:48:07React

获取输入框值的方法

在React中获取输入框值有多种方法，以下是几种常见的方式：

受控组件方式 使用useState钩子管理输入框的值，通过onChange事件更新状态。这种方法中，输入框的值完全由React状态控制。

import React, { useState } from 'react';

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

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

  return (
    <input 
      type="text" 
      value={inputValue} 
      onChange={handleChange} 
    />
  );
}

非受控组件方式 使用useRef钩子直接访问DOM元素，适合需要直接操作DOM或集成非React代码的场景。

import React, { useRef } from 'react';

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

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

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

表单提交时获取值 在表单提交时通过事件对象获取输入框的值，适用于表单处理场景。

function FormComponent() {
  const handleSubmit = (event) => {
    event.preventDefault();
    const value = event.target.elements.inputName.value;
    console.log(value);
  };

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

使用第三方库 对于复杂表单，可以使用Formik或React Hook Form等库简化状态管理。

import { useForm } from 'react-hook-form';

function FormComponent() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data.inputName);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('inputName')} />
      <button type="submit">Submit</button>
    </form>
  );
}

选择方法时应考虑组件复杂度、性能需求以及是否需要与其他非React代码集成。受控组件提供更好的控制但可能带来性能开销，非受控组件更接近传统DOM操作但可能难以集成React生态。

react如何获取输入框值