React 和 Enzyme 实现动态渲染表单-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，表单是非常常见的组件。由于用户交互的多样性，很难通过几个静态组件来满足不同场景的需求。本文将介绍如何使用 React 和 Enzyme 来动态渲染表单，满足不同场景的需求。

React 和 Enzyme 简介

React 是一个用于构建用户界面的 JavaScript 库，具有高效、灵活、可重用等特性，广泛应用于 Web 开发、移动应用开发等领域。

Enzyme 是由 Airbnb 开源的用于测试 React 应用的 JavaScript 测试工具库，提供了对 React 组件的渲染、交互、状态查询等功能。

动态表单实现需求

我们需要实现一个表单组件，可以动态渲染表单元素，例如：

根据不同的数据类型，渲染不同的表单元素，如输入框、单选框、下拉框等；
表单元素的数量和顺序需要根据传入的数据动态生成；
可以通过修改某一个表单元素，动态触发其他表单元素的变化，例如联动；
可以通过表单提交按钮触发事件，获取表单数据并进行相应的处理。

实现步骤

1. 创建表单组件

首先，我们创建一个表单组件，用于渲染表单元素。这里我们使用函数组件，组件接受一个对象数组作为参数，用于生成表单元素，代码如下：

// javascriptcn.com 代码示例
import React, { useState } from 'react';

function DynamicForm({ formData }) {
  const [form, setForm] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm({ ...form, [name]: value });
  };

  return (
    <form>
      {formData.map((field) => {
        switch (field.type) {
          case 'text':
            return (
              <div key={field.id}>
                <input
                  type="text"
                  name={field.name}
                  value={form[field.name] || ''}
                  onChange={handleChange}
                />
              </div>
            );
          case 'select':
            return (
              <div key={field.id}>
                <select
                  name={field.name}
                  value={form[field.name] || ''}
                  onChange={handleChange}
                >
                  <option value="">请选择</option>
                  {field.options.map((option) => (
                    <option key={option.id} value={option.value}>
                      {option.label}
                    </option>
                  ))}
                </select>
              </div>
            );
          case 'radio':
            return (
              <div key={field.id}>
                {field.options.map((option) => (
                  <label key={option.id}>
                    <input
                      type="radio"
                      name={field.name}
                      value={option.value}
                      onChange={handleChange}
                    />
                    {option.label}
                  </label>
                ))}
              </div>
            );
          default:
            return null;
        }
      })}
      <button type="submit">提交</button>
    </form>
  );
}

export default DynamicForm;

在组件内使用 useState 来存储表单数据，通过 handleChange 来更新表单数据。

组件接受一个名为 formData 的对象数组，用于生成表单元素。数组中每个对象表示一个表单元素，包括 id、name、type 和 options 等属性。

2. 测试表单组件

接下来，我们使用 Enzyme 来测试 DynamicForm 组件。

首先，我们需要安装 Enzyme：

npm install --save-dev enzyme enzyme-adapter-react-16

然后，我们创建 DynamicForm.test.js 文件，代码如下：

// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import DynamicForm from './DynamicForm';

const formData = [
  {
    id: 1,
    name: 'name',
    type: 'text',
  },
  {
    id: 2,
    name: 'gender',
    type: 'radio',
    options: [
      { id: 1, label: '男', value: 'male' },
      { id: 2, label: '女', value: 'female' },
    ],
  },
  {
    id: 3,
    name: 'age',
    type: 'select',
    options: [
      { id: 1, label: '18岁以下', value: '0' },
      { id: 2, label: '18-30岁', value: '1' },
      { id: 3, label: '30岁以上', value: '2' },
    ],
  },
];

describe('DynamicForm', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<DynamicForm formData={formData} />);
    expect(wrapper).toMatchSnapshot();
  });

  it('handles changes correctly', () => {
    const wrapper = shallow(<DynamicForm formData={formData} />);
    const nameInput = wrapper.find('input[name="name"]');
    nameInput.simulate('change', { target: { name: 'name', value: '张三' } });

    const genderInput = wrapper.find('input[name="gender"]');
    genderInput.at(0).simulate('change', { target: { name: 'gender', value: 'male' } });

    const ageInput = wrapper.find('select[name="age"]');
    ageInput.simulate('change', { target: { name: 'age', value: '2' } });

    expect(wrapper.find('pre').text()).toEqual('[object Object]');
  });
});

测试代码中，我们使用 shallow 函数来创建组件实例。然后，我们测试组件能否正确地渲染和处理表单数据变化。最后，我们使用 expect 断言来检查测试结果是否符合预期。

3. 实现动态表单逻辑

现在，我们已经有了一个动态渲染表单元素的组件，接下来我们需要实现以下功能：

在表单元素变化时，触发其他表单元素的动态渲染；
在表单提交时，处理表单数据并进行相应的操作。

3.1 级联选择

对于级联选择，我们可以通过在父组件的 state 中维护所选项的值，并通过 props 传递给子组件的方式，将子组件的选项根据所选值进行动态渲染。代码如下：

父组件：

// javascriptcn.com 代码示例
function CascadingForm() {
  const [province, setProvince] = useState('');
  const [city, setCity] = useState('');

  const handleProvinceChange = (value) => {
    setProvince(value);
    setCity('');
  };

  const handleCityChange = (value) => {
    setCity(value);
  };

  return (
    <div>
      <DynamicForm
        formData={[
          {
            id: 1,
            name: 'province',
            type: 'select',
            options: [
              { id: 1, label: '北京', value: 'bj' },
              { id: 2, label: '上海', value: 'sh' },
              { id: 3, label: '广州', value: 'gz' },
            ],
          },
          {
            id: 2,
            name: 'city',
            type: 'select',
            options: [
              { id: 1, label: '东城', value: 'dc', parent: 'bj' },
              { id: 2, label: '西城', value: 'xc', parent: 'bj' },
              { id: 3, label: '浦东', value: 'pd', parent: 'sh' },
              { id: 4, label: '黄浦', value: 'hp', parent: 'sh' },
              { id: 5, label: '天河', value: 'th', parent: 'gz' },
              { id: 6, label: '海珠', value: 'hz', parent: 'gz' },
            ].filter((option) => option.parent === province),
            disabled: !province,
          },
        ]}
        onChange={(name, value) => {
          if (name === 'province') {
            handleProvinceChange(value);
          } else if (name === 'city') {
            handleCityChange(value);
          }
        }}
      />
    </div>
  );

}

子组件：

// javascriptcn.com 代码示例
function DynamicForm({ formData, onChange }) {
  const [form, setForm] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm({ ...form, [name]: value });
    onChange(name, value);
  };

  return (
    <form>
      {formData.map((field) => {
        switch (field.type) {
          case 'text':
            return (
              <div key={field.id}>
                <input
                  type="text"
                  name={field.name}
                  value={form[field.name] || ''}
                  onChange={handleChange}
                />
              </div>
            );
          case 'select':
            return (
              <div key={field.id}>
                <select
                  name={field.name}
                  value={form[field.name] || ''}
                  onChange={handleChange}
                  disabled={field.disabled}
                >
                  <option value="">请选择</option>
                  {field.options.map((option) => (
                    <option key={option.id} value={option.value}>
                      {option.label}
                    </option>
                  ))}
                </select>
              </div>
            );
          default:
            return null;
        }
      })}
      <button type="submit">提交</button>
    </form>
  );
}

在 DynamicForm 组件中，我们通过 onChange 事件传递表单元素名和值，在父组件中处理和维护所选项的值，从而动态渲染后面的子表单元素。

3.2 表单提交

对于表单提交，我们可以在组件内部使用 handleSubmit 函数来处理表单数据，可以在组件内部使用 props 传递 onSubmit 函数来触发表单提交事件。代码如下：

// javascriptcn.com 代码示例
function DynamicForm({ formData, onSubmit }) {
  const [form, setForm] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm({ ...form, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(form);
  };

  return (
    <form onSubmit={handleSubmit}>
      {formData.map((field) => {
        switch (field.type) {
          case 'text':
            return (
              <div key={field.id}>
                <input
                  type="text"
                  name={field.name}
                  value={form[field.name] || ''}
                  onChange={handleChange}
                />
              </div>
            );
          case 'select':
            return (
              <div key={field.id}>
                <select
                  name={field.name}
                  value={form[field.name] || ''}
                  onChange={handleChange}
                  disabled={field.disabled}
                >
                  <option value="">请选择</option>
                  {field.options.map((option) => (
                    <option key={option.id} value={option.value}>
                      {option.label}
                    </option>
                  ))}
                </select>
              </div>
            );
          default:
            return null;
        }
      })}
      <button type="submit">提交</button>
    </form>
  );
}

export default DynamicForm;

使用方式：

// javascriptcn.com 代码示例
function App() {
  const handleSubmit = (data) => {
    console.log(data);
  };

  return (
    <div>
      <DynamicForm
        formData={[
          {
            id: 1,
            name: 'name',
            type: 'text',
          },
          {
            id: 2,
            name: 'gender',
            type: 'radio',
            options: [
              { id: 1, label: '男', value: 'male' },
              { id: 2, label: '女', value: 'female' },
            ],
          },
          {
            id: 3,
            name: 'age',
            type: 'select',
            options: [
              { id: 1, label: '18岁以下', value: '0' },
              { id: 2, label: '18-30岁', value: '1' },
              { id: 3, label: '30岁以上', value: '2' },
            ],
          },
        ]}
        onSubmit={handleSubmit}
      />
    </div>
  );
}

总结

本文介绍了如何使用 React 和 Enzyme 实现动态渲染表单，并提供了详细的示例代码。通过本文的学习，读者可以了解到 React 和 Enzyme 的基本功能，并能够在实际开发中应用这些知识，满足不同场景的需求。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651c0acf95b1f8cacd39e695