是因为默认情况下,React会将表单的输入值存储在组件的状态中,并在重新渲染时将这些值重新填充到表单中。如果希望在提交表单后清除输入,可以通过以下几种方式实现:
import React, { useState } from 'react';
function Form() {
const [inputValue, setInputValue] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
// 提交表单的逻辑处理
setInputValue('');
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button type="submit">提交</button>
</form>
);
}
ref.current.value
来清除输入。示例代码如下:import React, { useRef } from 'react';
function Form() {
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 Form() {
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>
);
}
以上是三种常见的清除React表单输入的方法,根据具体情况选择适合的方式。腾讯云提供的相关产品和服务可以参考腾讯云官方文档:腾讯云产品与服务。
领取专属 10元无门槛券
手把手带您无忧上云