react如何获取input
获取 Input 值的几种方法
使用受控组件（Controlled Component）
通过 value 和 onChange 绑定输入框的值到组件的状态：
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} />;
}使用非受控组件（Uncontrolled Component）
通过 ref 直接访问 DOM 元素的值：
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>
);
}表单提交时获取值
通过表单的 onSubmit 事件和 FormData 获取输入值：
function FormInput() {
const handleSubmit = (event) => {
event.preventDefault();
const formData = new FormData(event.target);
const inputValue = formData.get('inputName');
console.log(inputValue);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" name="inputName" />
<button type="submit">Submit</button>
</form>
);
}使用第三方库（如 Formik）
通过 Formik 简化表单管理和值获取：
import { Formik, Form, Field } from 'formik';
function FormikInput() {
return (
<Formik
initialValues={{ inputName: '' }}
onSubmit={(values) => console.log(values.inputName)}
>
<Form>
<Field type="text" name="inputName" />
<button type="submit">Submit</button>
</Form>
</Formik>
);
}注意事项
- 受控组件适合需要实时验证或动态反馈的场景。
- 非受控组件适合简单表单或性能敏感场景。
- 表单提交方式适合传统 HTML 表单行为。
- 第三方库（如 Formik）适合复杂表单逻辑管理。
