当前位置：首页 > React

react 如何获取控制器的数据

2026-01-26 03:24:38React

获取控制器数据的方法

在React中，获取控制器数据通常涉及表单处理、状态管理或与后端API交互。以下是几种常见场景的实现方式：

表单元素控制

使用useState钩子管理表单输入值：

import React, { useState } from 'react';

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

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

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

表单提交处理

通过onSubmit事件获取完整表单数据：

function SubmitForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);
    console.log(data); // 获取所有表单字段
  };

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

使用ref获取DOM元素

通过useRef直接访问DOM节点：

function RefExample() {
  const inputRef = React.useRef();

  const handleClick = () => {
    console.log(inputRef.current.value); // 直接获取输入值
  };

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

第三方表单库

使用如react-hook-form等库简化表单控制：

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

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

  const onSubmit = (data) => {
    console.log(data); // 自动收集表单数据
  };

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

类组件中的处理

在类组件中使用this.refs或状态管理：

class ClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

  handleChange = (e) => {
    this.setState({ value: e.target.value });
  };

  render() {
    return <input value={this.state.value} onChange={this.handleChange} />;
  }
}