react如何获取input值
获取 input 值的几种方法
在 React 中，获取 input 值可以通过受控组件或非受控组件的方式实现。以下是常见的方法：
受控组件方式
受控组件通过 state 和事件处理函数来管理 input 的值。每次输入变化时，更新 state 并重新渲染组件。
import React, { 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 元素来获取 input 的值。适用于不需要实时更新 state 的场景。
import React, { useRef } from 'react';
function UncontrolledInput() {
const inputRef = useRef(null);
const handleSubmit = () => {
console.log(inputRef.current.value);
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleSubmit}>Submit</button>
</div>
);
}表单提交时获取值
在表单提交时，可以通过事件对象的 target 属性获取 input 的值。
import React from 'react';
function FormInput() {
const handleSubmit = (e) => {
e.preventDefault();
const value = e.target.elements.inputName.value;
console.log(value);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" name="inputName" />
<button type="submit">Submit</button>
</form>
);
}使用自定义 Hook
如果需要复用逻辑，可以封装一个自定义 Hook 来管理 input 值。
import { useState } from 'react';
function useInput(initialValue) {
const [value, setValue] = useState(initialValue);
const handleChange = (e) => {
setValue(e.target.value);
};
return {
value,
onChange: handleChange,
};
}
function CustomHookInput() {
const inputProps = useInput('');
return <input type="text" {...inputProps} />;
}以上方法可以根据具体需求选择使用。受控组件适合需要实时更新和验证的场景，而非受控组件适合简单表单或性能敏感的场景。
