# @cat-react/form 中文文档

规范地址：https://npmcn.com/package/%40cat-react/form/

版本：0\.1\.2
npm 元数据更新时间：2022-07-12T15:36:29.369Z
中文译文更新时间：2026-11-09T05:57:45.526Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cat-react/form
原文对照：https://npmcn.com/package/%40cat-react/form/?lang=original
项目主页：https://github.com/cat-react/form#readme
源码仓库：https://github.com/cat-react/form

## 关键信息（来自 npm 元数据）

- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：2 个
- peer 依赖：react \>= 15\.0\.0 \< 17\.0\.0
- 首次发布：2017-09-11T21:11:59.405Z
- 最新版本发布：2018-01-30T13:57:23.454Z
- 近 30 天下载量：5577（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 0 个）

## 中文简介

一个简单而强大的库, 帮助创建有效的反应形式 .

## 安装

```sh
npm install @cat-react/form
```

也可以使用：`pnpm add @cat-react/form`、`yarn add @cat-react/form`、`bun add @cat-react/form`

## README

[![cat-react](https://user-images.githubusercontent.com/4418879/30520764-b86d5cc6-9bb4-11e7-9313-ced40eb4e066.png)](https://github.com/cat-react)

# [@ cat- react](https://github.com/cat-react) / 窗体 ![Build Status](https://travis-ci.org/cat-react/form.svg?branch=master) [![codecov](https://codecov.io/gh/cat-react/form/branch/master/graph/badge.svg)](https://codecov.io/gh/cat-react/form) [![npm version](https://badge.fury.io/js/%40cat-react%2Fform.svg)](https://badge.fury.io/js/%40cat-react%2Fform)

一个简单而强大的库, 帮助创建有效的反应形式 。 这个项目的灵感来自 [窗体反应](https://github.com/christianalfoni/formsy-react)。 。 。 .

## 安装

[![npm package](https://nodei.co/npm/@cat-react/form.png?compact=true)](https://www.npmjs.com/package/@cat-react/form)

-   安装依赖 `@cat-react/form`  
    (如: `yarn add @cat-react/form` 或者说 `npm install @cat-react/form --save`(中文(简体) )
-   导入组件为 `import {Form, Input} from '@cat-react/form';`

## 开始

| [API 文档](https://npmcn.com/docs/api.md) | [实例](https://cat-react.github.io/form/) |
| --- | --- |

您是否在寻找一种简单的方法, 用 React 创建有效的表格 ?

祝贺你! 你的搜索结束了,因为 **`@cat-react/form`** 提供了一种简单的方式来创建前端或后端验证的表格。 验证既可以是同步处理,也可以是同步处理,形式状态正在被实时刷新.

看看这个 [实例](https://cat-react.github.io/form/) 找出如何创造你的欲望.

```jsx
<Form>
    <MyInput name="email"
             validations={{
                 isEmail: true,
                 isRequired: true
             }}/>
    <MyInput name="email_confirm"
             validations={{
                 isRequired: true,
                 equalsField: 'email'
             }}
             messages={{
                 isRequired: 'Please confirm your email address.',
                 equalsField: 'The email addresses do not match each other.'
             }}/>
</Form>
```

## 示例自定义文本输入

您可以在此看到一个自定义文本输入的例子, 显示您如何执行自己的输入 :

```jsx
import React from 'react';
import {Input} from '@cat-react/form'

@Input
export default class BasicInput extends React.Component {
    onChange(event) {
        this.props.setValue(event.target.value);
    }

    getClassName() {
        let className = 'form-control';
        if (!this.props.isPristine()) {
            if (this.props.isValid()) {
                const isWarning = this.props.getMessages().length > 0;
                if (isWarning) {
                    className += ' warning';
                }
            } else {
                className += ' error';
            }
        }
        return className;
    }

    renderMessages() {
        let messages = [];
        if (!this.props.isPristine()) {
            messages = this.props.getMessages();
        }

        if (!messages || messages.length <= 0) {
            return null;
        }

        let className = 'errorText';
        if (this.props.isValid()) {
            className = 'warningText';
        }

        return <ul className={className}>{messages.map((message, i) => <li key={i}>{message}</li>)}</ul>;
    }

    render() {
        return (
            <div className="form-group">
                <label htmlFor={this.props.name}>{this.props.label} {this.props.isRequired() ? '*' : null}</label>
                <input type={this.props.type}
                       className={this.getClassName()}
                       id={this.props.name}
                       aria-describedby={this.props.name}
                       placeholder={this.props.placeholder}
                       value={this.props.getValue()}
                       onChange={this.onChange.bind(this)}
                       onBlur={this.props.touch}/>
                {this.renderMessages()}
            </div>
        );
    }
}
```

**说明**数字 : 你需要那个 _bail-plugin-变形器_ 要使用的插件 `@Input` 装饰师. 如果您不想或无法将此插件添加到您的 Webpack 配置中, 您需要将 HOC 用作一个 函数( 如 `connect()` (原始内容存档于2018-10-12). HOC of Redux.

示例 `export default Input(BasicInput)`

见 [Babel 文档](https://babeljs.io/docs/plugins/transform-decorators/) 详细指南 如何在应用程序中添加装饰器.

## 捐款

该项目至少需要最新稳定的节点和npm版本. 你还需要在全球安装纱线.

两个简单的步骤 让你的本地机器运行的东西:

-   叉出还原
-   执行 `yarn`

您可以以 `yarn run examples` 和试验 `yarn test`。 。 。 .

### 如何建立一个发布

-   更新 `CHANGELOG.md` 与新版本相关的所有更改
-   更新 `package.json`
-   推动更改
-   本地创建项目 `npm run build`
-   `cd` 输入 `dist` 文件夹并运行 `npm publish --access public`
-   起草新版本 `Github` 与《京都议定书》 `CHANGELOG.md` 文件

## 许可证

[MIT 许可证](https://npmcn.com/LICENSE)

版权(c)2018年 [催化器 GmbH](https://www.catalysts.cc/)

## 常见问题

### @cat-react/form 是什么？

一个简单而强大的库, 帮助创建有效的反应形式 \.

### 如何安装 @cat-react/form？

在项目目录运行 npm install @cat-react/form，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>= 15\.0\.0 \< 17\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cat-react/form 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/cat-react\_\_form 是否存在。

### @cat-react/form 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @cat-react/form 可以商用吗？

@cat-react/form 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cat-react/form 的下载量有多少？

根据 npm 官方下载统计，@cat-react/form 在 2026/10/09 – 2026/11/07 这 30 天内被下载 5,577 次，日均约 186 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cat-react/form 还在维护吗？

最新版本 0\.1\.2 发布于 2018/01/30（8 年前）；至今共发布 6 个版本，其中过去 12 个月发布了 0 个；首次发布于 2017/09/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。