react如何获取input
获取input值的几种方法
在React中获取input元素的值有多种方式，具体取决于组件的类型（受控或非受控）以及使用的React版本。以下是几种常见的方法：
受控组件方式 通过React的state管理输入值，每次输入变化时更新state：
import { useState } from 'react';
function ControlledInput() {
const [value, setValue] = useState('');
const handleChange = (e) => {
setValue(e.target.value);
};
return <input value={value} onChange={handleChange} />;
}非受控组件方式 使用ref直接访问DOM元素获取值：
import { useRef } from 'react';
function UncontrolledInput() {
const inputRef = useRef();
const handleClick = () => {
alert(inputRef.current.value);
};
return (
<>
<input ref={inputRef} />
<button onClick={handleClick}>Get Value</button>
</>
);
}表单提交时获取 在表单提交事件中通过event对象获取：
function FormSubmit() {
const handleSubmit = (e) => {
e.preventDefault();
const value = e.target.elements.username.value;
console.log(value);
};
return (
<form onSubmit={handleSubmit}>
<input name="username" />
<button type="submit">Submit</button>
</form>
);
}类组件中的使用 在类组件中可以使用createRef或回调ref：
class ClassComponentInput extends React.Component {
inputRef = React.createRef();
handleClick = () => {
console.log(this.inputRef.current.value);
};
render() {
return (
<>
<input ref={this.inputRef} />
<button onClick={this.handleClick}>Get Value</button>
</>
);
}
}选择哪种方法取决于具体需求：需要实时验证或控制输入时使用受控组件；只需要最终值时使用非受控组件可能更简单。
