为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Form.List 动态表单学习：轻松入门指南

Form.List 动态表单学习：轻松入门指南

标签：
JavaScript React.JS Vue.js
概述

Form.List 是一种用于构建动态表单的组件，它允许开发者根据需要动态添加或删除表单项。这种组件在构建需要处理可变数量输入项的表单时非常有用，例如创建订单、添加多个联系人等场景。本文将详细介绍如何使用 Form.List 动态表单学习，包括安装、配置和验证等步骤。

引入 Form.List 动态表单
什么是 Form.List

Form.List 是一种用于构建动态表单的组件，它允许开发者根据需要动态添加或删除表单项。这种组件在构建需要处理可变数量输入项的表单时非常有用，例如创建订单、添加多个联系人等场景。通过使用 Form.List，开发者可以轻松地控制表单的灵活性和复杂性，而不需要手动处理复杂的前端逻辑。

动态表单的意义

动态表单允许用户根据特定的需求添加或移除表单项。这种灵活性对于许多应用场景来说是必不可少的。例如，一个电子商务网站可能需要一个动态表单来允许用户添加多个商品到购物车，或者一个数据库管理系统需要一个动态表单来添加或编辑多行数据。动态表单不仅提高了用户体验，还简化了前端代码的编写和维护。

Form.List 的应用场景
  • 电子商务平台：购物车表单允许用户添加或移除商品。
  • 数据库管理系统：用户需要添加或编辑多个数据条目。
  • 教育平台：课程表单允许学生选择多个课程。
  • 社交媒体平台：用户可以添加多个社交链接或兴趣爱好。
安装与配置

安装所需依赖

安装 Form.List 组件需要先安装相关的依赖库。假设我们使用的是某个前端框架（如 React 或 Vue），通常这些库会作为外部依赖库使用。以下是使用 npm 安装依赖的示例：

npm install form-list

初始化 Form.List

初始化 Form.List 组件的第一步是引入并注册组件。这里以 React 为例，假设你已经安装了 form-list 预编译库，接下来需要在项目中引入它并注册为 React 组件。

import React from 'react';
import FormList from 'form-list';

function App() {
  return (
    <FormList />
  );
}

export default App;

配置基础表单结构

配置基础表单结构涉及设置默认的表单项以及定义渲染器。渲染器是用于渲染每个表单项的模板。以 React .为例，你可以定义一个组件来渲染每个表单项，并在 Form.List 组件中使用这个渲染器。

import React from 'react';
import FormList from 'form-list';

function ItemRenderer({ item }) {
  return (
    <div>
      <input type="text" value={item.name} />
      <input type="number" value={item.quantity} />
    </div>
  );
}

function App() {
  const initialItems = [
    { name: 'Item 1', quantity: 1 },
    { name: 'Item 2', quantity: 2 }
  ];

  return (
    <FormList
      initialItems={initialItems}
      itemRenderer={ItemRenderer}
    />
  );
}

export default App;
创建动态表单

添加 Form.List 组件

将 Form.List 添加到你的项目中，并设置初始表单项及其渲染器。渲染器负责渲染每个表单项，因此你需要创建一个简单的 React 组件来实现这一点。

import React from 'react';
import FormList from 'form-list';

function ItemRenderer({ item }) {
  return (
    <div>
      <input type="text" value={item.name} />
      <input type="number" value={item.quantity} />
    </div>
  );
}

function App() {
  const initialItems = [
    { name: 'Item 1', quantity: 1 },
    { name: 'Item 2', quantity: 2 }
  ];

  return (
    <FormList
      initialItems={initialItems}
      itemRenderer={ItemRenderer}
    />
  );
}

export default App;

使用 Form.List 渲染表单

通过将 FormList 组件插入到应用中的合适位置，并添加相应的初始表单项，即可渲染出动态表单。

import React from 'react';
import FormList from 'form-list';

function ItemRenderer({ item }) {
  return (
    <div>
      <input type="text" value={item.name} />
      <input type="number" value={item.quantity} />
    </div>
  );
}

function App() {
  const initialItems = [
    { name: 'Item 1', quantity: 1 },
    { name: 'Item 2', quantity: 2 }
  ];

  return (
    <div>
      <h1>Dynamic Form</h1>
      <FormList
        initialItems={initialItems}
        itemRenderer={ItemRenderer}
      />
    </div>
  );
}

export default App;

动态添加和删除表单项

Form.List 组件通常提供 API 用于动态添加和删除表单项。通过调用 addItem 和 removeItem 方法，你可以为表单动态添加或移除表单项。

import React, { useState } from 'react';
import FormList from 'form-list';

function ItemRenderer({ item, index, onRemove }) {
  return (
    <div key={index}>
      <input type="text" value={item.name} />
      <input type="number" value={item.quantity} />
      <button onClick={() => onRemove(index)}>Remove</button>
    </div>
  );
}

function App() {
  const [items, setItems] = useState([
    { name: 'Item 1', quantity: 1 },
    { name: 'Item 2', quantity: 2 }
  ]);

  const handleAddItem = () => {
    setItems([...items, { name: '', quantity: 0 }]);
  };

  const handleRemoveItem = (index) => {
    setItems(items.filter((_, i) => i !== index));
  };

  return (
    <div>
      <h1>Dynamic Form</h1>
      <button onClick={handleAddItem}>Add Item</button>
      <FormList
        initialItems={items}
        itemRenderer={(item, index) => (
          <ItemRenderer
            item={item}
            index={index}
            onRemove={handleRemoveItem}
          />
        )}
      />
    </div>
  );
}

export default App;
表单数据管理

获取 Form.List 中的数据

为了获取 Form.List 中的数据，你可以在表单项更新时监听数据变更，并将数据存储在状态或属性中。以下是一个简单的例子：

import React, { useState } from 'react';
import FormList from 'form-list';

function ItemRenderer({ item, index, onRemove, onChange }) {
  return (
    <div key={index}>
      <input
        type="text"
        value={item.name}
        onChange={(e) => {
          item.name = e.target.value;
          onChange(item);
        }}
      />
      <input
        type="number"
        value={item.quantity}
        onChange={(e) => {
          item.quantity = e.target.value;
          onChange(item);
        }}
      />
      <button onClick={() => onRemove(index)}>Remove</button>
    </div>
  );
}

function App() {
  const [items, setItems] = useState([
    { name: 'Item 1', quantity: 1 },
    { name: 'Item 2', quantity: 2 }
  ]);

  const handleAddItem = () => {
    setItems([...items, { name: '', quantity: 0 }]);
  };

  const handleRemoveItem = (index) => {
    setItems(items.filter((_, i) => i !== index));
  };

  const handleItemChange = (index, item) => {
    const newItems = [...items];
    newItems[index] = item;
    setItems(newItems);
  };

  return (
    <div>
      <h1>Dynamic Form</h1>
      <button onClick={handleAddItem}>Add Item</button>
      <FormList
        initialItems={items}
        itemRenderer={(item, index) => (
          <ItemRenderer
            item={item}
            index={index}
            onRemove={handleRemoveItem}
            onChange={handleItemChange.bind(null, index)}
          />
        )}
      />
    </div>
  );
}

export default App;

更新 Form.List 中的数据

当你需要更新 Form.List 中的数据时，你可以通过状态更新来实现。这通常涉及到监听输入变化，并在每次变化时更新状态。

import React, { useState } from 'react';
import FormList from 'form-list';

function ItemRenderer({ item, index, onRemove, onChange }) {
  return (
    <div key={index}>
      <input
        type="text"
        value={item.name}
        onChange={(e) => {
          item.name = e.target.value;
          onChange(item);
        }}
      />
      <input
        type="number"
        value={item.quantity}
        onChange={(e) => {
          item.quantity = e.target.value;
          onChange(item);
        }}
      />
      <button onClick={() => onRemove(index)}>Remove</button>
    </div>
  );
}

function App() {
  const [items, setItems] = useState([
    { name: 'Item 1', quantity: 1 },
    { name: 'Item 2', quantity: 2 }
  ]);

  const handleAddItem = () => {
    setItems([...items, { name: '', quantity: 0 }]);
  };

  const handleRemoveItem = (index) => {
    setItems(items.filter((_, i) => i !== index));
  };

  const handleItemChange = (index, item) => {
    const newItems = [...items];
    newItems[index] = item;
    setItems(newItems);
  };

  return (
    <div>
      <h1>Dynamic Form</h1>
      <button onClick={handleAddItem}>Add Item</button>
      <FormList
        initialItems={items}
        itemRenderer={(item, index) => (
          <ItemRenderer
            item={item}
            index={index}
            onRemove={handleRemoveItem}
            onChange={handleItemChange.bind(null, index)}
          />
        )}
      />
    </div>
  );
}

export default App;

保存和提交数据

保存和提交表单数据通常涉及将数据传递给后端 API 或本地存储。可以通过向后端发送 AJAX 请求或调用特定的函数来完成。

import React, { useState } from 'react';
import FormList from 'form-list';
import axios from 'axios';

function ItemRenderer({ item, index, onRemove, onChange }) {
  return (
    <div key={index}>
      <input
        type="text"
        value={item.name}
        onChange={(e) => {
          item.name = e.target.value;
          onChange(item);
        }}
      />
      <input
        type="number"
        value={item.quantity}
        onChange={(e) => {
          item.quantity = e.target.value;
          onChange(item);
        }}
      />
      <button onClick={() => onRemove(index)}>Remove</button>
    </div>
  );
}

function App() {
  const [items, setItems] = useState([
    { name: 'Item 1', quantity: 1 },
    { name: 'Item 2', quantity: 2 }
  ]);

  const handleSubmit = () => {
    axios.post('/api/save', { items })
      .then((response) => {
        console.log('Data saved successfully');
      })
      .catch((error) => {
        console.error('Error saving data', error);
      });
  };

  const handleAddItem = () => {
    setItems([...items, { name: '', quantity: 0 }]);
  };

  const handleRemoveItem = (index) => {
    setItems(items.filter((_, i) => i !== index));
  };

  const handleItemChange = (index, item) => {
    const newItems = [...items];
    newItems[index] = item;
    setItems(newItems);
  };

  return (
    <div>
      <h1>Dynamic Form</h1>
      <button onClick={handleAddItem}>Add Item</button>
      <FormList
        initialItems={items}
        itemRenderer={(item, index) => (
          <ItemRenderer
            item={item}
            index={index}
            onRemove={handleRemoveItem}
            onChange={handleItemChange.bind(null, index)}
          />
        )}
      />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

export default App;
表单验证

添加验证规则

表单验证通常涉及到设置输入字段的验证规则。这可以是简单的正则表达式验证，也可以是更复杂的验证逻辑。Form.List 组件通常提供内置的验证功能或可以通过插件来扩展验证功能。

import React, { useState } from 'react';
import FormList from 'form-list';

function ItemRenderer({ item, index, onRemove, onChange }) {
  return (
    <div key={index}>
      <input
        type="text"
        value={item.name}
        onChange={(e) => {
          item.name = e.target.value;
          onChange(item);
        }}
        placeholder="Enter name"
      />
      <input
        type="number"
        value={item.quantity}
        onChange={(e) => {
          item.quantity = e.target.value;
          onChange(item);
        }}
        placeholder="Enter quantity"
      />
      <button onClick={() => onRemove(index)}>Remove</button>
    </div>
  );
}

function App() {
  const [items, setItems] = useState([
    { name: '', quantity: '' }
  ]);

  const handleAddItem = () => {
    setItems([...items, { name: '', quantity: '' }]);
  };

  const handleRemoveItem = (index) => {
    setItems(items.filter((_, i) => i !== index));
  };

  const handleItemChange = (index, item) => {
    const newItems = [...items];
    newItems[index] = item;
    setItems(newItems);
  };

  return (
    <div>
      <h1>Dynamic Form</h1>
      <button onClick={handleAddItem}>Add Item</button>
      <FormList
        initialItems={items}
        itemRenderer={(item, index) => (
          <ItemRenderer
            item={item}
            index={index}
            onRemove={handleRemoveItem}
            onChange={handleItemChange.bind(null, index)}
          />
        )}
      />
      <button onClick={() => validateForm(items)}>Submit</button>
    </div>
  );
}

function validateForm(items) {
  items.forEach((item) => {
    if (!item.name || !item.quantity) {
      console.error('Validation failed for item');
      return false;
    }
  });
  console.log('Form validated successfully');
  return true;
}

export default App;

显示验证提示信息

为了更友好地提示用户，可以在输入字段旁边显示验证提示信息。这可以通过条件渲染来实现。

import React, { useState } from 'react';
import FormList from 'form-list';

function ItemRenderer({ item, index, onRemove, onChange }) {
  const [validationErrors, setValidationErrors] = useState({ name: '', quantity: '' });

  const handleNameChange = (e) => {
    item.name = e.target.value;
    onChange(item);
    setValidationErrors({ ...validationErrors, name: '' });
  };

  const handleQuantityChange = (e) => {
    item.quantity = e.target.value;
    onChange(item);
    setValidationErrors({ ...validationErrors, quantity: '' });
  };

  return (
    <div key={index}>
      <input
        type="text"
        value={item.name}
        onChange={handleNameChange}
        placeholder="Enter name"
      />
      {validationErrors.name && <div>{validationErrors.name}</div>}
      <input
        type="number"
        value={item.quantity}
        onChange={handleQuantityChange}
        placeholder="Enter quantity"
      />
      {validationErrors.quantity && <div>{validationErrors.quantity}</div>}
      <button onClick={() => onRemove(index)}>Remove</button>
    </div>
  );
}

function App() {
  const [items, setItems] = useState([
    { name: '', quantity: '' }
  ]);

  const handleAddItem = () => {
    setItems([...items, { name: '', quantity: '' }]);
  };

  const handleRemoveItem = (index) => {
    setItems(items.filter((_, i) => i !== index));
  };

  const handleItemChange = (index, item) => {
    const newItems = [...items];
    newItems[index] = item;
    setItems(newItems);
  };

  return (
    <div>
      <h1>Dynamic Form</h1>
      <button onClick={handleAddItem}>Add Item</button>
      <FormList
        initialItems={items}
        itemRenderer={(item, index) => (
          <ItemRenderer
            item={item}
            index={index}
            onRemove={handleRemoveItem}
            onChange={handleItemChange.bind(null, index)}
          />
        )}
      />
      <button onClick={() => validateForm(items)}>Submit</button>
    </div>
  );
}

function validateForm(items) {
  items.forEach((item) => {
    if (!item.name) {
      item.validationErrors.name = 'Name is required';
    }
    if (!item.quantity) {
      item.validationErrors.quantity = 'Quantity is required';
    }
  });
  console.log('Form validated successfully');
  return true;
}

export default App;

自定义验证错误信息

为了提供更具体的错误信息，你可以自定义验证规则和错误消息。这可以通过设置不同的验证逻辑来实现。

import React, { useState } from 'react';
import FormList from 'form-list';

function ItemRenderer({ item, index, onRemove, onChange }) {
  const [validationErrors, setValidationErrors] = useState({ name: '', quantity: '' });

  const handleNameChange = (e) => {
    item.name = e.target.value;
    onChange(item);
    setValidationErrors({ ...validationErrors, name: '' });
  };

  const handleQuantityChange = (e) => {
    item.quantity = e.target.value;
    onChange(item);
    setValidationErrors({ ...validationErrors, quantity: '' });
  };

  const validateName = (value) => {
    if (!value) {
      return 'Name is required';
    }
    if (!/^[a-zA-Z]+$/.test(value)) {
      return 'Name should only contain letters';
    }
    return '';
  };

  const validateQuantity = (value) => {
    if (!value) {
      return 'Quantity is required';
    }
    if (value < 0) {
      return 'Quantity should be positive';
    }
    return '';
  };

  return (
    <div key={index}>
      <input
        type="text"
        value={item.name}
        onChange={handleNameChange}
        placeholder="Enter name"
      />
      {validationErrors.name && <div>{validationErrors.name}</div>}
      <input
        type="number"
        value={item.quantity}
        onChange={handleQuantityChange}
        placeholder="Enter quantity"
      />
      {validationErrors.quantity && <div>{validationErrors.quantity}</div>}
      <button onClick={() => onRemove(index)}>Remove</button>
    </div>
  );
}

function App() {
  const [items, setItems] = useState([
    { name: '', quantity: '' }
  ]);

  const handleAddItem = () => {
    setItems([...items, { name: '', quantity: '' }]);
  };

  const handleRemoveItem = (index) => {
    setItems(items.filter((_, i) => i !== index));
  };

  const handleItemChange = (index, item) => {
    const newItems = [...items];
    newItems[index] = item;
    setItems(newItems);
  };

  return (
    <div>
      <h1>Dynamic Form</h1>
      <button onClick={handleAddItem}>Add Item</button>
      <FormList
        initialItems={items}
        itemRenderer={(item, index) => (
          <ItemRenderer
            item={item}
            index={index}
            onRemove={handleRemoveItem}
            onChange={handleItemChange.bind(null, index)}
          />
        )}
      />
      <button onClick={() => validateForm(items)}>Submit</button>
    </div>
  );
}

function validateForm(items) {
  items.forEach((item) => {
    item.validationErrors.name = validateName(item.name);
    item.validationErrors.quantity = validateQuantity(item.quantity);
  });
  console.log('Form validated successfully');
  return true;
}

export default App;
实际案例与练习

实现一个简单的动态表单

实现一个简单的动态表单，允许用户添加多个商品。这个表单将包含商品名称和数量输入框，并允许用户添加或移除商品。

import React, { useState } from 'react';
import FormList from 'form-list';

function ItemRenderer({ item, index, onRemove, onChange }) {
  const [validationErrors, setValidationErrors] = useState({ name: '', quantity: '' });

  const handleNameChange = (e) => {
    item.name = e.target.value;
    onChange(item);
    setValidationErrors({ ...validationErrors, name: '' });
  };

  const handleQuantityChange = (e) => {
    item.quantity = e.target.value;
    onChange(item);
    setValidationErrors({ ...validationErrors, quantity: '' });
  };

  const validateName = (value) => {
    if (!value) {
      return 'Name is required';
    }
    if (!/^[a-zA-Z]+$/.test(value)) {
      return 'Name should only contain letters';
    }
    return '';
  };

  const validateQuantity = (value) => {
    if (!value) {
      return 'Quantity is required';
    }
    if (value < 0) {
      return 'Quantity should be positive';
    }
    return '';
  };

  return (
    <div key={index}>
      <input
        type="text"
        value={item.name}
        onChange={handleNameChange}
        placeholder="Enter name"
      />
      {validationErrors.name && <div>{validationErrors.name}</div>}
      <input
        type="number"
        value={item.quantity}
        onChange={handleQuantityChange}
        placeholder="Enter quantity"
      />
      {validationErrors.quantity && <div>{validationErrors.quantity}</div>}
      <button onClick={() => onRemove(index)}>Remove</button>
    </div>
  );
}

function App() {
  const [items, setItems] = useState([
    { name: '', quantity: '' }
  ]);

  const handleAddItem = () => {
    setItems([...items, { name: '', quantity: '' }]);
  };

  const handleRemoveItem = (index) => {
    setItems(items.filter((_, i) => i !== index));
  };

  const handleItemChange = (index, item) => {
    const newItems = [...items];
    newItems[index] = item;
    setItems(newItems);
  };

  return (
    <div>
      <h1>Dynamic Form</h1>
      <button onClick={handleAddItem}>Add Item</button>
      <FormList
        initialItems={items}
        itemRenderer={(item, index) => (
          <ItemRenderer
            item={item}
            index={index}
            onRemove={handleRemoveItem}
            onChange={handleItemChange.bind(null, index)}
          />
        )}
      />
      <button onClick={() => validateForm(items)}>Submit</button>
    </div>
  );
}

function validateForm(items) {
  items.forEach((item) => {
    item.validationErrors.name = validateName(item.name);
    item.validationErrors.quantity = validateQuantity(item.quantity);
  });
  console.log('Form validated successfully');
  return true;
}

export default App;

解决常见问题与技巧

问题：为什么我的表单项在添加后不会更新状态？

解决方法：
确保你在处理状态更新时使用了正确的状态管理方法。对于 React，确保你使用 setState 或 useState 来更新状态。

const handleAddItem = () => {
  setItems([...items, { name: '', quantity: '' }]);
};

问题：表单项的值在输入后没有更新

解决方法：
确保你为每个输入添加了 onChange 事件处理，并在事件处理函数中更新状态。

const handleNameChange = (e) => {
  item.name = e.target.value;
  onChange(item);
};

进一步扩展与改进

你可以通过添加更多的表单项和验证规则来进一步扩展和改进你的动态表单。例如，你可以添加电子邮件字段并验证电子邮件格式，或者添加日期选择器并验证日期范围。


import React, { useState } from 'react';
import FormList from 'form-list';

function ItemRenderer({ item, index, onRemove, onChange }) {
  const [validationErrors, setValidationErrors] = useState({ name: '', quantity: '', email: '', date: '' });

  const handleNameChange = (e) => {
    item.name = e.target.value;
    onChange(item);
    setValidationErrors({ ...validationErrors, name: '' });
  };

  const handleQuantityChange = (e) => {
    item.quantity = e.target.value;
    onChange(item);
    setValidationErrors({ ...validationErrors, quantity: '' });
  };

  const handleEmailChange = (e) => {
    item.email = e.target.value;
    onChange(item);
    setValidationErrors({ ...validationErrors, email: '' });
  };

  const handleDateChange = (e) => {
    item.date = e.target.value;
    onChange(item);
    setValidationErrors({ ...validationErrors, date: '' });
  };

  const validateName = (value) => {
    if (!value) {
      return 'Name is required';
    }
    if (!/^[a-zA-Z]+$/.test(value)) {
      return 'Name should only contain letters';
    }
    return '';
  };

  const validateQuantity = (value) => {
    if (!value) {
      return 'Quantity is required';
    }
    if (value < 0) {
      return 'Quantity should be positive';
    }
    return '';
  };

  const validateEmail = (value) => {
    if (!value) {
      return 'Email is required';
    }
    if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) {
      return 'Invalid email format';
    }
    return '';
  };

  const validateDate = (value) => {
    if (!value) {
      return 'Date is required';
    }
    return '';
  };

  return (
    <div key={index}>
      <input
        type="text"
        value={item.name}
        onChange={handleNameChange}
        placeholder="Enter name"
      />
      {validationErrors.name && <div>{validationErrors.name}</div>}
      <input
        type="number"
        value={item.quantity}
        onChange={handleQuantityChange}
        placeholder="Enter quantity"
      />
      {validationErrors.quantity && <div>{validationErrors.quantity}</div>}
      <input
        type="email"
        value={item.email}
        onChange={handleEmailChange}
        placeholder="Enter email"
      />
      {validationErrors.email && <div>{validationErrors.email}</div>}
      <input
        type="date"
        value={item.date}
        onChange={handleDateChange}
        placeholder="Enter date"
      />
      {validationErrors.date && <div>{validationErrors.date}</div>}
      <button onClick={() => onRemove(index)}>Remove</button>
    </div>
  );
}

function App() {
  const [items, setItems] = useState([
    { name: '', quantity: '', email: '', date: '' }
  ]);

  const handleAddItem = () => {
    setItems([...items, { name: '', quantity: '', email: '', date: '' }]);
  };

  const handleRemoveItem = (index) => {
    setItems(items.filter((_, i) => i !== index));
  };

  const handleItemChange = (index, item) => {
    const newItems = [...items];
    newItems[index] = item;
    setItems(newItems);
  };

  return (
    <div>
      <h1>Dynamic Form</h1>
      <button onClick={handleAddItem}>Add Item</button>
      <FormList
        initialItems={items}
        itemRenderer={(item, index) => (
          <ItemRenderer
            item={item}
            index={index}
            onRemove={handleRemoveItem}
            onChange={handleItemChange.bind(null, index)}
          />
        )}
      />
      <button onClick={() => validateForm(items)}>Submit</button>
    </div>
  );
}

function validateForm(items) {
  items.forEach((item) => {
    item.validationErrors.name = validateName(item.name);
    item.validationErrors.quantity = validateQuantity(item.quantity);
    item.validationErrors.email = validateEmail(item.email);
    item.validationErrors.date = validateDate(item.date);
  });
  console.log('Form validated successfully');
  return true;
}

export default App;
``

通过以上步骤，你可以构建一个功能齐全的动态表单，满足各种复杂的需求。此外，你还可以进一步探索 Form.List 的其他功能和 API 来实现更高级的功能。
点击查看更多内容
发表于 2024.11.14 12:55， 共 109 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

UYOU

手记
篇
粉丝
86
获赞与收藏
459

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消