在React原生文本输入上显示错误消息可以通过以下步骤实现:
import React, { useState } from 'react';
const TextInputWithError = () => {
const [value, setValue] = useState('');
const [error, setError] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
};
const handleBlur = () => {
if (value.trim() === '') {
setError('输入不能为空');
} else {
setError('');
}
};
return (
<div>
<input type="text" value={value} onChange={handleChange} onBlur={handleBlur} />
{error && <span style={{ color: 'red' }}>{error}</span>}
</div>
);
};
export default TextInputWithError;
useState
钩子来管理输入框的值和错误消息。handleChange
函数用于更新输入框的值,handleBlur
函数在输入框失去焦点时进行验证。handleBlur
函数中,我们检查输入框的值是否为空。如果为空,我们将错误消息设置为"输入不能为空",否则将错误消息清空。<span>
元素将其显示为红色。这样,当用户在文本输入框中输入内容并失去焦点时,如果输入为空,将会显示错误消息"输入不能为空"。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云