当前位置：首页 > React

react如何获取控件的值

2026-01-25 06:23:06React

获取表单控件的值

在React中，可以通过onChange事件和状态管理来获取表单控件的值。使用useState钩子来存储输入值，并在事件处理函数中更新状态。

import React, { useState } from 'react';

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

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

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

使用ref获取DOM元素的值

通过useRef钩子可以直接访问DOM元素，适用于需要直接操作DOM的场景，比如获取输入框的值而不依赖状态更新。

import React, { useRef } from 'react';

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

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

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

获取多个表单控件的值

对于包含多个输入的表单，可以通过动态设置name属性来区分不同的输入，并在事件处理函数中根据name更新对应的状态。

import React, { useState } from 'react';

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

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

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

使用FormData获取表单值

对于传统的表单提交场景，可以通过FormData对象直接获取表单中的所有字段值，无需手动管理每个输入的状态。

react如何获取控件的值

import React from 'react';

function FormDataExample() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData.entries());
    console.log(data);
  };

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