如何在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;