在ReactJs中清除表单输入有多种方法,以下是其中几种常用的方法:
import React, { useState } from 'react';
function MyForm() {
const [inputValue, setInputValue] = useState('');
const handleInputChange = (e) => {
setInputValue(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
// 处理表单提交逻辑
// ...
// 清除表单输入
setInputValue('');
};
return (
<form onSubmit={handleSubmit}>
<input type="text" value={inputValue} onChange={handleInputChange} />
<button type="submit">提交</button>
</form>
);
}
import React, { useRef } from 'react';
function MyForm() {
const inputRef = useRef(null);
const handleSubmit = (e) => {
e.preventDefault();
// 处理表单提交逻辑
// ...
// 清除表单输入
inputRef.current.value = '';
};
return (
<form onSubmit={handleSubmit}>
<input type="text" ref={inputRef} />
<button type="submit">提交</button>
</form>
);
}
import React, { useRef } from 'react';
function MyForm() {
const formRef = useRef(null);
const handleSubmit = (e) => {
e.preventDefault();
// 处理表单提交逻辑
// ...
// 清除表单输入
formRef.current.reset();
};
return (
<form ref={formRef} onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">提交</button>
</form>
);
}
以上是在ReactJs中清除表单输入的几种常用方法。根据具体的场景和需求,选择适合的方法来清除表单输入。
领取专属 10元无门槛券
手把手带您无忧上云