一条神奇妙计，让React表单摆脱冗余代码的束缚！

前端

2023-09-09 17:37:13

受控表单在 React 中的简化实现：告别繁琐的 onChange 和 value

受控表单：简介

在 React 中使用受控表单时，开发者通常会陷入定义大量 onChange 和 value 的困境，导致代码冗余且难以维护。此外，还要处理受控过程的复杂性，这增加了开发难度。

传统实现方式的局限性

传统的受控表单实现方式依赖于 useState hook 和 onChange 事件处理函数，这对于每个表单字段都需要定义和编写。这种方法带来了以下问题：

代码冗余：每个表单字段都需要一个 useState hook 和 onChange 事件处理函数，代码变得臃肿。
受控过程的复杂性：开发者需要手动维护受控状态，这增加了开发负担。

新实现方式：引入 Redux

本文介绍了一种使用 Redux 来简化受控表单实现的新方法。Redux 是一个状态管理库，允许开发者集中管理应用程序状态。使用 Redux 管理表单状态，开发者可以摆脱手动维护受控过程的麻烦。

使用 Redux 实现受控表单

使用 Redux 实现受控表单的步骤如下：

定义表单状态切片： 在 Redux store 中创建一个名为 form 的切片，其中包含 name 和 email 等表单字段。
创建操作： 创建名为 setName 和 setEmail 的动作，用于更新表单字段的值。
连接组件： 使用 useDispatch 和 useSelector 将表单组件连接到 Redux store，以便访问表单状态和分发动作。
处理表单提交： 在表单提交处理程序中，使用 console.log() 或其他方法记录表单数据。

代码示例

以下代码示例演示了如何使用 Redux 实现受控表单：

// actions.js
export const setName = (name) => {
  return {
    type: 'SET_NAME',
    payload: name
  };
};

export const setEmail = (email) => {
  return {
    type: 'SET_EMAIL',
    payload: email
  };
};

// reducer.js
const initialState = {
  name: '',
  email: ''
};

const formReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_NAME':
      return {
        ...state,
        name: action.payload
      };
    case 'SET_EMAIL':
      return {
        ...state,
        email: action.payload
      };
    default:
      return state;
  }
};

// store.js
import { createStore } from 'redux';
import { formReducer } from './reducer';

const store = createStore(formReducer);

// component.js
import React, { useDispatch, useSelector } from 'react';
import { setName, setEmail } from './actions';

const Form = () => {
  const dispatch = useDispatch();
  const name = useSelector((state) => state.form.name);
  const email = useSelector((state) => state.form.email);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(`Name: ${name}, Email: ${email}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={(e) => dispatch(setName(e.target.value))} />
      </label>
      <label>
        Email:
        <input type="email" value={email} onChange={(e) => dispatch(setEmail(e.target.value))} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;