react 如何获取控制器的数据
获取控制器数据的方法
在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} />;
}
}注意事项
- 受控组件建议优先使用状态管理（
useState） - 非受控组件（如文件上传）适合使用
ref或FormData - 复杂表单建议使用
formik或react-hook-form等库 - 始终在表单提交时调用
e.preventDefault()防止页面刷新
