当前位置：首页 > React

react如何获取input值

2026-02-12 10:20:17React

获取 input 值的几种方法

受控组件方式
通过 React 的状态管理机制，将 input 的值绑定到组件的 state 中。每当 input 的值发生变化时，更新 state，从而实现对 input 值的控制。

import React, { useState } from 'react';

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

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

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

非受控组件方式
使用 useRef 钩子直接访问 DOM 元素，适用于不需要实时更新 state 的场景。

import React, { useRef } from 'react';

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

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

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

表单提交时获取值
在表单提交事件中，通过事件对象直接获取 input 的值。

function FormSubmit() {
  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 FormWithReactHookForm() {
  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如何获取input值