react如何获取input
获取 input 值的方法
在 React 中获取 input 值可以通过多种方式实现，以下是几种常见的方法：
使用受控组件（Controlled Components）
受控组件通过 React 状态管理 input 的值，每次输入变化时更新状态：
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 Components）
非受控组件通过 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>
);
}使用 Form 表单提交
在表单提交时通过事件对象获取 input 值：
function FormInput() {
const handleSubmit = (event) => {
event.preventDefault();
const value = event.target.elements.myInput.value;
console.log(value);
};
return (
<form onSubmit={handleSubmit}>
<input name="myInput" type="text" />
<button type="submit">Submit</button>
</form>
);
}注意事项
- 受控组件适合需要实时验证或控制的场景
- 非受控组件适合简单表单或需要直接访问 DOM 的场景
- 表单提交方式适合传统表单处理场景
每种方法都有其适用场景，应根据具体需求选择合适的方式。
