React TypeScript 项目实战：表单处理与成员管理-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00903/article/details/148943935

React TypeScript 项目实战：表单处理与成员管理

react-typescript-samples The goal of this project is to provide a set of simple samples, providing and step by step guide to start working with React and Typescript. 项目地址: https://gitcode.com/gh_mirrors/re/react-typescript-samples

前言

在 React 应用开发中，表单处理是一个常见且重要的功能。本文将基于一个 React TypeScript 项目，详细介绍如何实现一个完整的成员信息表单，包括表单创建、数据绑定、验证和提交等关键环节。

项目背景

本项目是一个成员管理系统，主要功能包括：

展示成员列表
添加新成员
编辑成员信息

我们将重点讲解如何构建一个可复用的表单组件，并实现成员信息的添加功能。

技术栈

React
TypeScript
React Router
Toastr（用于显示通知）

实现步骤

1. 准备工作

首先确保项目依赖已正确安装，包括 React、TypeScript 和 React Router 等基础库。此外，还需要安装用于显示通知的 toastr 库：

npm install toastr --save
npm install @types/toastr --save-dev

2. 创建成员表单页面

2.1 基本页面结构

创建一个基本的成员页面组件，作为表单的容器：

import * as React from 'react';

export const MemberPage: React.StatelessComponent<{}> = () => {
  return (
    <div className="row">
      <h2>Member Page</h2>
    </div>
  );
}

2.2 添加路由配置

在路由配置中添加新成员页面的路由：

import { Route, Switch, HashRouter } from 'react-router-dom';
import { About, MembersPage, MemberPage } from './components';

export const AppRouter: React.StatelessComponent<{}> = () => {
  return (
    <HashRouter>
      <div className="container-fluid">
        <Route component={App} />
        <Switch>
          <Route exact path="/" component={About} />
          <Route path="/about" component={About} />
          <Route path="/members" component={MembersPage} />
          <Route path="/member" component={MemberPage} />
        </Switch>
      </div>
    </HashRouter>
  );
}

3. 构建可复用表单组件

3.1 输入框组件

创建一个通用的输入框组件，包含标签、输入框和错误提示：

import * as React from "react";

interface Props {
  name: string;
  label: string;
  placeholder?: string;
  value: string;
  onChange: (fieldName: string, value: string) => void;
  error?: string;
}

export const Input: React.StatelessComponent<Props> = (props) => {
  return (
    <div className={formatWrapperClass(props)}>
      <label htmlFor={props.name}>{props.label}</label>
      <div className="field">
        <input type="text"
          name={props.name}
          className="form-control"
          placeholder={props.placeholder}
          value={props.value}
          onChange={onChangeInput(props)}
        />
      </div>
      <div className="help-block">{props.error}</div>
    </div>
  )
};

3.2 按钮组件

创建一个通用的按钮组件：

import * as React from 'react';

interface Props {
  label: string;
  className: string;
  onClick: () => void;
}

export const Button: React.StatelessComponent<Props> = (props) => {
  return (
    <button type="button"
      className={props.className}
      onClick={props.onClick}
    >
      {props.label}
    </button>
  );
};

4. 成员表单实现

4.1 表单组件

使用上述通用组件构建成员表单：

import * as React from 'react';
import { MemberEntity } from '../../model';
import { Input, Button } from '../../common/components/form';

interface Props {
  member: MemberEntity;
  onChange: (fieldName: string, value: string) => void;
  onSave: () => void;
}

export const MemberForm: React.StatelessComponent<Props> = (props) => {
  return (
    <form>
      <h1>Manage member</h1>

      <Input
        name="login"
        label="Login"
        value={props.member.login}
        onChange={props.onChange}
      />

      <Input
        name="avatar_url"
        label="Avatar Url"
        value={props.member.avatar_url}
        onChange={props.onChange}
      />

      <Button
        label="Save"
        className="btn btn-default"
        onClick={props.onSave}
      />
    </form>
  );
};

4.2 表单容器

创建表单容器组件，处理表单状态和逻辑：

import * as React from 'react';
import * as toastr from 'toastr';
import { memberAPI } from '../../api/member';
import { History } from 'history';
import { MemberEntity } from '../../model';
import { MemberPage } from './page';

interface State {
  member: MemberEntity;
}

interface Props {
  history: History;
}

export class MemberPageContainer extends React.Component<Props, State> {
  constructor(props) {
    super(props);

    this.state = {
      member: {
        id: -1,
        login: '',
        avatar_url: '',
      }
    };
  }

  private onFieldValueChange = (fieldName: string, value: string) => {
    this.setState({
      member: {
        ...this.state.member,
        [fieldName]: value,
      }
    });
  }

  private onSave = () => {
    memberAPI.saveMember(this.state.member)
      .then(() => {
        toastr.success('Member saved.');
        this.props.history.goBack();
      });
  }

  render() {
    return (
      <MemberPage
        member={this.state.member}
        onChange={this.onFieldValueChange}
        onSave={this.onSave}
      />
    );
  }
}

5. API 集成

实现保存成员的 API 方法：

import { MemberEntity } from '../../model';

let mockMembers = members;

const saveMember = (member: MemberEntity): Promise<boolean> => {
  const index = mockMembers.findIndex(m => m.id === member.id);

  index >= 0 ?
    updateMember(member, index) :
    insertMember(member);

  return Promise.resolve(true);
};

const updateMember = (member: MemberEntity, index: number) => {
  mockMembers = [
    ...mockMembers.slice(0, index),
    member,
    ...mockMembers.slice(index + 1),
  ];
};

const insertMember = (member: MemberEntity) => {
  member.id = mockMembers.length;
  mockMembers = [...mockMembers, member];
};

export const memberAPI = {
  fetchMembers,
  saveMember,
};