Khái Niệm Quản Lý Trạng Thái

Fluent UI cung cấp giải pháp quản lý trạng thái biểu mẫu thông qua thành phần Field và công cụ quản lý trạng thái. Quá trình này bao gồm ba trạng thái chính: tải dữ liệu, xử lý thành công và báo lỗi.

Quản Lý Trạng Thái Tải

Sử dụng thành phần Spinner để hiển thị trạng thái xử lý khi người dùng gửi biểu mẫu:

import { Button, Spinner, Input } from '@fluentui/react-components';

function FormSubmit() {
  const [submitting, setSubmitting] = useState(false);

  const submitHandler = async () => {
    setSubmitting(true);
    try {
      await processFormData(); 
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div>
      <Input placeholder="Nhập thông tin" />
      <Button 
        onClick={submitHandler}
        disabled={submitting}
        icon={submitting ? <Spinner size="small" /> : null}
      >
        {submitting ? 'Đang xử lý...' : 'Gửi'}
      </Button>
    </div>
  );
}

Xử Lý Lỗi Biểu Mẫu

Thành phần Field hỗ trợ kiểm tra hợp lệ với các trạng thái:

• validationState="error": Hiển thị thông báo lỗi
• validationState="warning": Cảnh báo
• validationState="success": Thành công

import { Field, Input } from '@fluentui/react-components';

function ValidationForm() {
  const [username, setUsername] = useState('');
  const [validationMsg, setValidationMsg] = useState('');

  const validateInput = () => {
    if(username.length < 5) {
      setValidationMsg('Tên phải có ít nhất 5 ký tự');
    }
  };

  return (
    <Field
      label="Tên người dùng"
      validationState={validationMsg ? "error" : undefined}
      validationMessage={validationMsg}
    >
      <Input 
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        onBlur={validateInput}
      />
    </Field>
  );
}

Phản Hồi Trạng Thái Thành Công

Sử dụng kết hợp trạng thái và kiểu CSS để hiển thị phản hồi tích cực:

const successStyle = { color: '#107c10', padding: '10px' };

function SubmissionResult({ status }) {
  if (status === 'success') {
    return (
      <div style={successStyle}>
        ✓ Thao tác thành công
      </div>
    );
  }
  return null;
}

Quản Lý Trạng Thái Nâng Cao

Kết hợp nhiều trạng thái cho biểu mẫu phức tạp:

function AdvancedForm() {
  const [formStatus, setFormStatus] = useState('idle');

  const handleAsyncAction = async () => {
    setFormStatus('processing');
    try {
      await executeTask();
      setFormStatus('completed');
      setTimeout(() => setFormStatus('idle'), 2000);
    } catch {
      setFormStatus('failed');
    }
  };

  return (
    <div>
      {formStatus === 'processing' && <Spinner label="Đang tải..." />}
      {formStatus === 'failed' && <span style={{color:'red'}}>Có lỗi xảy ra</span>}
      {formStatus === 'completed' && <span style={successStyle}>Hoàn thành!</span>}
      
      <Button onClick={handleAsyncAction}>
        Thực hiện
      </Button>
    </div>
  );
}

Nguyên Tắc Thiết Kế

• Đảm bảo tính nhất quán về màu sắc và biểu tượng
• Cung cấp phản hồi tức thì khi nhập liệu
• Tối ưu hiệu năng với useMemo và useCallback
• Tuân thủ tiêu chuẩn truy cập WCAG