在React中清除表单的方法有多种。以下是一种常见的方法:
下面是一个示例代码:
import React, { useState } from 'react';
const MyForm = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
message: ''
});
const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = (e) => {
e.preventDefault();
// 处理表单提交逻辑
// 清除表单
setFormData({
name: '',
email: '',
message: ''
});
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" name="name" value={formData.name} onChange={handleChange} />
</label>
<label>
Email:
<input type="email" name="email" value={formData.email} onChange={handleChange} />
</label>
<label>
Message:
<textarea name="message" value={formData.message} onChange={handleChange} />
</label>
<button type="submit">Submit</button>
</form>
);
};
export default MyForm;
在上述代码中,我们使用useState钩子来创建一个名为formData的状态变量,它包含了表单的各个字段的值。每当输入字段的值发生变化时,handleChange函数会更新对应字段的值。在表单提交时,handleSubmit函数会处理表单提交逻辑,并将formData重置为初始值,以清除表单。
这是一个简单的示例,你可以根据实际需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云