如何在React中使用Custom Hooks处理表单输入验证

在React中使用自定义Hooks处理表单输入验证可以使代码更加模块化和可重用。以下是一个示例，展示如何使用自定义Hooks处理表单输入验证：

import React, { useState } from 'react';

// 自定义Hooks，用于处理表单输入验证
const useFormInput = (initialValue, validator) => {
  const [value, setValue] = useState(initialValue);
  const [error, setError] = useState('');

  const handleChange = (e) => {
    const newValue = e.target.value;
    setValue(newValue);

    if (validator(newValue)) {
      setError('');
    } else {
      setError('Invalid input');
    }
  };

  return {
    value,
    error,
    handleChange,
  };
};

const Form = () => {
  // 使用自定义Hooks
  const username = useFormInput('', (value) => value.length > 3);
  const password = useFormInput('', (value) => value.length > 5);

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!username.error && !password.error) {
      // 处理表单提交逻辑
      console.log('Form submitted:', username.value, password.value);
    } else {
      console.log('Form has errors');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input type="text" value={username.value} onChange={username.handleChange} />
        {username.error && <span style={{ color: 'red' }}>{username.error}</span>}
      </label>
      <br />
      <label>
        Password:
        <input type="password" value={password.value} onChange={password.handleChange} />
        {password.error && <span style={{ color: 'red' }}>{password.error}</span>}
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

在上面的示例中，我们创建了一个名为useFormInput的自定义Hooks，它接受一个初始值和一个验证函数作为参数，并返回一个包含值、错误和处理变化的函数的对象。我们在表单中使用这个自定义Hooks来处理用户名和密码的输入验证。在handleSubmit函数中，我们检查是否有错误，如果没有则执行表单提交逻辑。

通过使用自定义Hooks，我们可以将表单输入验证逻辑封装起来，使代码更清晰和易于维护。