从React Form基础表单组件的构建过程，领略UI库设计的魅力

2023-09-03 14:50:49

在上一篇文章中，我们探讨了组件库的基本结构、模块化、状态管理等方面。本篇将会继续深入探讨组件库的构建，带你实现Form表单组件，主要包括组件的布局、Input组件和Radio组件的实现。

组件布局

Form表单组件主要由以下几个部分组成：

表单标题
表单域
表单按钮

表单标题通常用于表单的目的或功能。表单域是用户输入数据的区域，可以包含各种类型的输入控件，如文本框、单选按钮、复选框等。表单按钮用于提交或重置表单。

实现

import React from "react";

const Form = ({ title, children, onSubmit, onReset }) => {
  return (
    <form onSubmit={onSubmit} onReset={onReset}>
      <h2>{title}</h2>
      {children}
      <button type="submit">提交</button>
      <button type="reset">重置</button>
    </form>
  );
};

export default Form;

用法

import React from "react";
import Form from "./Form";

const MyForm = () => {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("表单已提交");
  };

  const handleReset = (e) => {
    e.preventDefault();
    console.log("表单已重置");
  };

  return (
    <Form title="我的表单" onSubmit={handleSubmit} onReset={handleReset}>
      <input type="text" placeholder="姓名" />
      <input type="email" placeholder="邮箱" />
      <input type="password" placeholder="密码" />
    </Form>
  );
};

export default MyForm;

Input组件

Input组件用于用户输入数据，可以是文本、数字、电子邮件等。

实现

import React from "react";

const Input = ({ type, placeholder, value, onChange }) => {
  return (
    <input
      type={type}
      placeholder={placeholder}
      value={value}
      onChange={onChange}
    />
  );
};

export default Input;

用法

import React from "react";
import Input from "./Input";

const MyInput = () => {
  const [value, setValue] = React.useState("");

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

  return (
    <Input
      type="text"
      placeholder="姓名"
      value={value}
      onChange={handleChange}
    />
  );
};

export default MyInput;

Radio组件

Radio组件用于用户选择单一选项，通常用于性别、职业等单选题。

实现

import React from "react";

const Radio = ({ name, value, label, checked, onChange }) => {
  return (
    <label>
      <input
        type="radio"
        name={name}
        value={value}
        checked={checked}
        onChange={onChange}
      />
      {label}
    </label>
  );
};

export default Radio;

用法

import React from "react";
import Radio from "./Radio";

const MyRadio = () => {
  const [value, setValue] = React.useState("male");

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

  return (
    <div>
      <Radio
        name="gender"
        value="male"
        label="男"
        checked={value === "male"}
        onChange={handleChange}
      />
      <Radio
        name="gender"
        value="female"
        label="女"
        checked={value === "female"}
        onChange={handleChange}
      />
    </div>
  );
};

export default MyRadio;