react如何获取input值
获取input值的几种方法
在React中获取input元素的值可以通过多种方式实现，以下是常见的几种方法：
使用受控组件（Controlled Component）
受控组件是React推荐的方式，通过将input的值绑定到state，并在onChange事件中更新state来获取值：
import React, { useState } from 'react';
function App() {
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value);
};
return (
<div>
<input type="text" value={inputValue} onChange={handleChange} />
<p>Input value: {inputValue}</p>
</div>
);
}使用ref（非受控组件）
通过useRef钩子直接访问DOM元素，适用于需要直接操作DOM的场景：
import React, { useRef } from 'react';
function App() {
const inputRef = useRef(null);
const handleClick = () => {
alert(inputRef.current.value);
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleClick}>Get Value</button>
</div>
);
}使用FormData
适用于表单提交时一次性获取所有input值：
function App() {
const handleSubmit = (event) => {
event.preventDefault();
const formData = new FormData(event.target);
console.log(formData.get('username')); // 假设input有name="username"
};
return (
<form onSubmit={handleSubmit}>
<input type="text" name="username" />
<button type="submit">Submit</button>
</form>
);
}使用事件对象
直接在事件处理函数中通过event.target.value获取：
function App() {
const handleKeyUp = (event) => {
console.log(event.target.value);
};
return <input type="text" onKeyUp={handleKeyUp} />;
}方法对比
- 受控组件：实时同步state和UI，适合需要即时验证或处理的场景
- ref：避免频繁渲染，适合需要手动触发获取值的场景
- FormData：适合表单提交时批量处理多个输入字段
- 事件对象：简单快捷，适合不需要持久化存储值的场景
根据具体需求选择合适的方法，受控组件是React中最主流和推荐的方式。
