В чём разница между Dirty, Touched и Pristine?

Разница между Dirty, Touched и Pristine в формах

Это три состояния, которые отслеживают взаимодействие пользователя с полями формы. Они особенно важны при валидации и управлении состоянием формы в React.

Что такое Pristine?

Pristine (неизменённое) — это исходное состояние поля, когда пользователь ещё не взаимодействовал с ним. Поле находится в pristine состоянии, если пользователь никогда не редактировал поле, значение совпадает с изначальным, или форма только что загрузилась.

function Form() {
  const [email, setEmail] = useState('');
  const [isPristine, setIsPristine] = useState(true);
  
  const handleChange = (e) => {
    setEmail(e.target.value);
    setIsPristine(false);
  };
  
  return (
    <div>
      <input value={email} onChange={handleChange} />
      {isPristine && <p>Поле не изменялось</p>}
    </div>
  );
}

Что такое Dirty?

Dirty (загрязненное, изменённое) — это противоположность Pristine. Поле становится dirty, когда пользователь изменил значение, значение отличается от изначального, или произошла хотя бы одна операция редактирования.

function Form() {
  const [formData, setFormData] = useState({ email: 'initial@example.com' });
  const [isDirty, setIsDirty] = useState(false);
  
  const handleChange = (e) => {
    const newValue = e.target.value;
    setFormData({ email: newValue });
    setIsDirty(newValue !== 'initial@example.com');
  };
  
  return (
    <div>
      <input value={formData.email} onChange={handleChange} />
      {isDirty && <p>Форма изменена</p>}
    </div>
  );
}

Что такое Touched?

Touched (тронуто) — это состояние, которое отслеживает, был ли пользователь в этом поле. Поле становится touched, когда пользователь кликнул на поле, покинул поле или произошло любое взаимодействие с полем.

Тауched НЕ означает, что поле было изменено! Пользователь может кликнуть и ничего не писать.

function Form() {
  const [email, setEmail] = useState('');
  const [isTouched, setIsTouched] = useState(false);
  const [error, setError] = useState('');
  
  const handleBlur = () => {
    setIsTouched(true);
    
    if (!email.includes('@')) {
      setError('Введите корректный email');
    }
  };
  
  const handleChange = (e) => {
    setEmail(e.target.value);
    if (isTouched && e.target.value.includes('@')) {
      setError('');
    }
  };
  
  return (
    <div>
      <input 
        value={email} 
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {isTouched && error && <p>{error}</p>}
    </div>
  );
}

Основные отличия

Практический пример: форма входа

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [touched, setTouched] = useState({ email: false, password: false });
  const [dirty, setDirty] = useState({ email: false, password: false });
  
  const validateEmail = (val) => val.includes('@');
  const validatePassword = (val) => val.length >= 6;
  
  const handleChange = (field, value) => {
    if (field === 'email') {
      setEmail(value);
      setDirty({ ...dirty, email: value !== '' });
    } else {
      setPassword(value);
      setDirty({ ...dirty, password: value !== '' });
    }
  };
  
  const handleBlur = (field) => {
    setTouched({ ...touched, [field]: true });
  };
  
  const emailValid = validateEmail(email);
  const passwordValid = validatePassword(password);
  
  return (
    <form>
      <div>
        <input
          placeholder="Email"
          value={email}
          onChange={(e) => handleChange('email', e.target.value)}
          onBlur={() => handleBlur('email')}
        />
        {touched.email && !emailValid && (
          <p>Некорректный email</p>
        )}
      </div>
      
      <div>
        <input
          placeholder="Пароль"
          type="password"
          value={password}
          onChange={(e) => handleChange('password', e.target.value)}
          onBlur={() => handleBlur('password')}
        />
        {touched.password && !passwordValid && (
          <p>Минимум 6 символов</p>
        )}
      </div>
      
      <button 
        disabled={!emailValid || !passwordValid}
      >
        Войти
      </button>
    </form>
  );
}

Главное правило

• Pristine: поле не изменялось (противоположность Dirty)
• Dirty: пользователь изменил значение
• Touched: пользователь взаимодействовал с полем

Используй эти состояния для улучшения UX: не показывай ошибки до того, как пользователь начал взаимодействовать с полем!