react如何获取控件的值
获取表单控件的值
在React中，可以通过onChange事件和状态管理来获取表单控件的值。使用useState钩子来存储输入值，并在事件处理函数中更新状态。
import React, { useState } from 'react';
function FormExample() {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => {
setInputValue(e.target.value);
};
return (
<input
type="text"
value={inputValue}
onChange={handleChange}
/>
);
}使用ref获取DOM元素的值
通过useRef钩子可以直接访问DOM元素，适用于需要直接操作DOM的场景，比如获取输入框的值而不依赖状态更新。
import React, { useRef } from 'react';
function RefExample() {
const inputRef = useRef(null);
const handleClick = () => {
alert(inputRef.current.value);
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleClick}>Get Value</button>
</div>
);
}获取多个表单控件的值
对于包含多个输入的表单，可以通过动态设置name属性来区分不同的输入，并在事件处理函数中根据name更新对应的状态。
import React, { useState } from 'react';
function MultiInputForm() {
const [formData, setFormData] = useState({
username: '',
password: ''
});
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
};
return (
<form>
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
/>
<input
type="password"
name="password"
value={formData.password}
onChange={handleChange}
/>
</form>
);
}使用FormData获取表单值
对于传统的表单提交场景，可以通过FormData对象直接获取表单中的所有字段值，无需手动管理每个输入的状态。
import React from 'react';
function FormDataExample() {
const handleSubmit = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const data = Object.fromEntries(formData.entries());
console.log(data);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit">Submit</button>
</form>
);
}受控组件与非受控组件的选择
- 受控组件：表单数据由React状态管理，适用于需要实时验证或动态控制的场景。
- 非受控组件：表单数据由DOM自身管理，适用于简单表单或需要直接操作DOM的场景。
