react如何获取输入框数据
获取输入框数据的方法
在React中获取输入框数据可以通过多种方式实现，以下是几种常见的方法：
受控组件方式 通过将输入框的值与React组件的state绑定，实现数据的双向绑定。每当输入框内容变化时，更新state的值。
import { useState } from 'react';
function ControlledInput() {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => {
setInputValue(e.target.value);
};
return (
<input
type="text"
value={inputValue}
onChange={handleChange}
/>
);
}非受控组件方式 使用ref直接访问DOM元素获取值，适合需要直接操作DOM或表单验证的场景。
import { useRef } from 'react';
function UncontrolledInput() {
const inputRef = useRef(null);
const handleSubmit = () => {
console.log(inputRef.current.value);
};
return (
<>
<input type="text" ref={inputRef} />
<button onClick={handleSubmit}>提交</button>
</>
);
}表单提交时获取 在表单提交事件中通过事件对象获取输入框的值。
function FormSubmission() {
const handleSubmit = (e) => {
e.preventDefault();
const value = e.target.elements.myInput.value;
console.log(value);
};
return (
<form onSubmit={handleSubmit}>
<input name="myInput" type="text" />
<button type="submit">提交</button>
</form>
);
}使用自定义Hook 创建自定义Hook封装输入框逻辑，提高代码复用性。
function useInput(initialValue) {
const [value, setValue] = useState(initialValue);
const onChange = (e) => {
setValue(e.target.value);
};
return { value, onChange };
}
function CustomHookInput() {
const inputProps = useInput('');
return <input type="text" {...inputProps} />;
}选择哪种方法取决于具体需求。受控组件适合需要实时响应输入变化的场景，非受控组件适合需要直接访问DOM或性能敏感的场景。表单提交方式适合传统表单处理，自定义Hook则能提高代码复用性。
