README
react-material-formutil
Happy to use react-formutil in the project based on Material-UI ^_^
在 Material-UI 项目，结合react-formutil 来快速构建表单。
如果你在使用其他 react-组件库，可以查阅：
- ant-design
react-antd-formutil- react-bootstrap
react-bootstrap-formutil- react-md
react-md-formutil
安装 Installation
# npm
npm install react-material-formutil --save
# yarn
yarn install react-material-formutil
使用 Usage
react-material-formutil整合了react-formutil的组件，所以可以直接从react-material-formutil中导出所需要的react-formutil组件。不用单独从react-formutil中导出。
先看一个使用示例（点击查看在线完整示例 : react-material-formutil on codesandbox.io）：
import React, { Component } from 'react';
import { withForm, FormControl } from 'react-material-formutil';
import TextField from '@material-ui/core/TextField'; // 导入mui的TextField组件
@withForm
class MyForm extends Component {
submit = () => {
const { $invalid, $getFirstError, $params } = this.props.$formutil;
if ($invalid) {
alert($getFistError());
} else {
// submit your data
}
};
render() {
return (
<form onSubmit={this.onSubmit}>
<FormControl name="username" required>
<TextField label="Username" />
</FormControl>
</form>
);
}
}
FormControl是 react-material-formuitl 新增加的组件，withForm是react-formutil的组件（没错，你可以直接从react-material-formutil中导出react-formutil的组件啦）。
只需要将material-ui的交互组件，嵌套在FormControl下，即可实现自动的表单状态同步。
<FormControl />
要实现将material-ui的交互组件的值能同步到 react-formutil 的状态中，需要通过 FormControl 这个组件来实现中间态绑定。
FormControl类似material-ui中的同名组件，但是它基于react-formutil实现了表单状态的收集与同步，并对Checkbox Radio
Switch Select Input等做了兼容，并且也提供了类似material-ui中同名组件的同样的 UI 层面功能。
FormControl下只允许放置一个表单组件，不允许多个。
name
设置输入项的 name 值，表单项将会以 name 作为 key 收集到 formutil 的状态中。支持嵌套语法 （同react-formutil的Field同名参数，可以参考 name）
$defaultValue
设置该表单项的默认值 （同react-formutil的Field同名参数，可以参考$defaultvalue）
$validators
设置校验方法 （同react-formutil的Field同名参数 , 可以参考
$validators）
同 react-formutil 的 EasyField，FormControl 也内置了同样的校验规则：
required必填requiredmaxLength。最大输入长度，有效输入时才会校验maxLength="100"minLength最小输入长度，有效输入时才会校验minLength="10"max最大输入数值，仅支持 Number 比较。有效输入时才会校验max="100"min最小输入数值，仅支持 Number 比较。有效输入时才会校验min="10"pattern正则匹配。有效输入时才会校验pattern={/^\d+$/}enum枚举值检测。有效输入时才会校验enum={[1,2,3]}checker自定义校验函数。checker={value => value > 10 && value < 100 || ' 输入比如大于 10 小与 100'}
注：校验属性的值为 null 时表示不进行该校验
内置的校验规则无需再次声明，除非规则不符合预期，需要替换，则可以通过$validators 传递同名校验方法即可替换默认的。另外，内置的校验规则，如果校验不通过，会尝试去 validMessage 匹配错误信息。
controlProps
该属性为要传递给material-ui中的FormControl组件的配置项。如果使用TextField，则会传递给TextField组件：
<FormControl
controlProps={{
fullWidth: true
}}>
<Input />
</FormControl>
label
设置 label，如果传入字符串，会自动应用InputLabel：
<FormControl name="name" label="Username">
<Input />
</FormControl>
//or
<FormControl name="name" label={<InputLabel>Username</InputLabel>}>
<Input />
</FormControl>
helperText
设置 helperText，如果传入字符串，会自动应用FormHelperText：
<FormControl name="name" helperText="Please type your name">
<Input />
</FormControl>
//or
<FormControl name="name" helperText={<FormHelperText>Please type your name</FormHelperText>}>
<Input />
</FormControl>
$parser
设置输入的值收集到 formutil 状态中时的过滤处理。默认为value => value
<FormControl $parser={value => parseInt(value)}>
<Input />
</FormControl>
$formatter
设置 formutil 中的值渲染到输入组件上时的过滤处理。默认为value => value
<FormControl $formatter={value => '