React EasyUI 表单
表单（ Form ）提供多种方法来执行带有表单字段的动作。
表单（ Form ）可调用validate方法以检查表单是否有效。
属性列表
| 名称 |
数据类型 |
作用描述 |
默认值 |
| model |
Object |
表单数据。 |
null |
| rules |
Object |
验证规则。 |
null |
| delay |
number |
延迟验证上次输入值。 |
200 |
rules: {
name: ["required", "length[5,10]"],
email: "email",
hero: "required",
addr: {
"required":true,
"myrule":{
"validator": (value) => {
if (...){
return true;
} else {
return Promise(resolve => {
//...
resolve(true);
});
}
},
"message": "my error message."
}
}
}
事件列表
| 名称 |
参数 |
作用描述 |
| onValidate |
errors |
验证字段时触发。 |
| onChange |
name,value |
验证字段时触发。 |
| onSubmit |
event |
提交表单时触发。 |
方法列表
| 名称 |
参数 |
返回值 |
作用描述 |
| validate |
none |
void |
验证所有表单规则。 |
| validateField |
name |
void |
验证指定字段的规则。 |
注：
- 继承： LocaleBase 。
使用方法
<Form model={user} onChange={this.handleChange.bind(this)}>
<div style={{ marginBottom: '20px' }}>
<Label htmlFor="name" align="top">Name:</Label>
<TextBox inputId="name" name="name" value={user.name}></TextBox>
</div>
<div style={{ marginBottom: '20px' }}>
<Label htmlFor="email" align="top">Email:</Label>
<TextBox inputId="email" name="email" value={user.email}></TextBox>
</div>
<div style={{ marginBottom: '20px' }}>
<Label htmlFor="hero" align="top">Select a hero:</Label>
<ComboBox inputId="hero" data={heroes} name="hero" value={user.hero}></ComboBox>
</div>
<div style={{ marginBottom: '20px' }}>
<CheckBox inputId="accept" name="accept" checked={user.accept}></CheckBox>
<Label htmlFor="accept" style={{width:100}}>Accept Me</Label>
</div>
<div style={{ marginBottom: '20px' }}>
<LinkButton onClick={this.handleSubmit.bind(this)}>Submit</LinkButton>
</div>
</Form>