当前位置：首页 > React

react如何获取输入框的值

2026-01-26 05:42:24React

获取输入框值的常用方法

受控组件方式
通过useState管理输入框的值，将状态与输入框的value属性绑定，监听onChange事件更新状态：

import { useState } from 'react';

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

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

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

非受控组件方式
使用useRef直接获取DOM元素，通过ref.current.value访问值：

import { useRef } from 'react';

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

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

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

表单提交场景的处理

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

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

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

动态输入框处理

多个输入框的场景
使用对象管理多个输入框状态，通过name属性区分：

react如何获取输入框的值

function MultiInputExample() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  return (
    <>
      <input 
        name="username" 
        value={formData.username} 
        onChange={handleChange} 
      />
      <input 
        name="password" 
        value={formData.password} 
        onChange={handleChange} 
      />
    </>
  );
}