react如何获取输入框值
获取输入框值的方法
在React中获取输入框值有多种方法，以下是几种常见的方式：
受控组件方式
使用useState钩子管理输入框的值，通过onChange事件更新状态。这种方法中，输入框的值完全由React状态控制。
import React, { useState } from 'react';
function InputComponent() {
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value);
};
return (
<input
type="text"
value={inputValue}
onChange={handleChange}
/>
);
}非受控组件方式
使用useRef钩子直接访问DOM元素，适合需要直接操作DOM或集成非React代码的场景。
import React, { useRef } from 'react';
function InputComponent() {
const inputRef = useRef(null);
const handleClick = () => {
alert(inputRef.current.value);
};
return (
<>
<input type="text" ref={inputRef} />
<button onClick={handleClick}>Get Value</button>
</>
);
}表单提交时获取值 在表单提交时通过事件对象获取输入框的值，适用于表单处理场景。
function FormComponent() {
const handleSubmit = (event) => {
event.preventDefault();
const value = event.target.elements.inputName.value;
console.log(value);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" name="inputName" />
<button type="submit">Submit</button>
</form>
);
}使用第三方库 对于复杂表单，可以使用Formik或React Hook Form等库简化状态管理。
import { useForm } from 'react-hook-form';
function FormComponent() {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
console.log(data.inputName);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('inputName')} />
<button type="submit">Submit</button>
</form>
);
}选择方法时应考虑组件复杂度、性能需求以及是否需要与其他非React代码集成。受控组件提供更好的控制但可能带来性能开销，非受控组件更接近传统DOM操作但可能难以集成React生态。
