用useReducer打造无懈可击的RN输入表单校验系统

前端

2024-02-07 22:34:51

用useReducer搭建高效的RN输入表单校验系统

序幕

周末是书写代码最宁静的时刻，也是展示真才实学的良机。这次，我决定用最基础的hook实现注册表单的前端校验，包括useState、useReducer（状态有点多）和useRef（定值）。废话不多说，一起踏上这个代码之旅吧！

第一章：揭开useReducer的神秘面纱

在React Native中，useState是处理状态的利器，但当状态变得复杂多变时，useReducer就闪亮登场了。它是管理复杂状态的绝佳选择。

useReducer接受两个参数：reducer函数和初始状态，返回一个状态和一个分发函数。reducer函数接收当前状态和一个动作（action），根据动作更新状态并返回新的状态。

第二章：构建RN输入表单校验系统

现在，让我们着手构建一个RN输入表单校验系统。首先，我们需要创建表单组件，然后用useReducer来管理表单状态。

1. 创建表单组件

import React, { useState } from 'react';

const Form = () => {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

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

    // 表单校验逻辑

    if (username === '') {
      alert('请输入用户名');
      return;
    }

    if (email === '') {
      alert('请输入邮箱');
      return;
    }

    if (password === '') {
      alert('请输入密码');
      return;
    }

    // 表单提交逻辑

    console.log('表单提交成功');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="用户名" />
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="邮箱" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="密码" />
      <button type="submit">提交</button>
    </form>
  );
};

export default Form;

2. 使用useReducer管理表单状态

import React, { useReducer } from 'react';

const initialState = {
  username: '',
  email: '',
  password: '',
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'SET_USERNAME':
      return { ...state, username: action.payload };
    case 'SET_EMAIL':
      return { ...state, email: action.payload };
    case 'SET_PASSWORD':
      return { ...state, password: action.payload };
    default:
      return state;
  }
};

const Form = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

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

    // 表单校验逻辑

    if (state.username === '') {
      alert('请输入用户名');
      return;
    }

    if (state.email === '') {
      alert('请输入邮箱');
      return;
    }

    if (state.password === '') {
      alert('请输入密码');
      return;
    }

    // 表单提交逻辑

    console.log('表单提交成功');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={state.username} onChange={(e) => dispatch({ type: 'SET_USERNAME', payload: e.target.value })} placeholder="用户名" />
      <input type="email" value={state.email} onChange={(e) => dispatch({ type: 'SET_EMAIL', payload: e.target.value })} placeholder="邮箱" />
      <input type="password" value={state.password} onChange={(e) => dispatch({ type: 'SET_PASSWORD', payload: e.target.value })} placeholder="密码" />
      <button type="submit">提交</button>
    </form>
  );
};

export default Form;