mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
update form
This commit is contained in:
yiminghe
parent
a1751b5f55
commit
798d15b4f0
@ -2,9 +2,7 @@
|
||||
|
||||
- order: 2
|
||||
|
||||
示例展示了如何通过使用 `Form.ValueMixin` 来获取和更新表单提交的数值。
|
||||
|
||||
**注意：** 1）需要为每个输入控件声明 `name` 属性；2）ES6 语法 [不支持 `mixins`](https://facebook.github.io/react/docs/reusable-components.html#no-mixins)；
|
||||
示例展示了如何通过使用 `Form.create` 来获取和更新表单提交的数值。
|
||||
|
||||
---
|
||||
|
||||
@ -13,68 +11,48 @@ import { Form, Input, Button, Checkbox, Radio, Row, Col } from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
const Demo = React.createClass({
|
||||
mixins: [Form.ValueMixin],
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
formData: {
|
||||
userName: '大眼萌 minion',
|
||||
password: undefined,
|
||||
gender: 'male',
|
||||
remark: undefined,
|
||||
agreement: undefined,
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
let Demo = React.createClass({
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
console.log('收到表单值：', this.state.formData);
|
||||
console.log('收到表单值：', this.props.form.getFieldsValue());
|
||||
},
|
||||
|
||||
render() {
|
||||
const formData = this.state.formData;
|
||||
const { getFieldProps } = this.props.form;
|
||||
return (
|
||||
<Form horizontal onSubmit={this.handleSubmit}>
|
||||
<FormItem
|
||||
label="用户名："
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 14 }}
|
||||
required>
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
id="password"
|
||||
label="密码："
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 14 }}
|
||||
required>
|
||||
<Input type="password" id="password" name="password" placeholder="请输入密码" value={formData.password} onChange={this.setValue.bind(this, 'password')} />
|
||||
wrapperCol={{ span: 14 }}>
|
||||
<Input type="password" {...getFieldProps('pass')} placeholder="请输入密码" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="您的性别："
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 14 }}
|
||||
required>
|
||||
<RadioGroup name="gender" value={formData.gender} onChange={this.setValue.bind(this, 'gender')} >
|
||||
wrapperCol={{ span: 14 }}d>
|
||||
<RadioGroup {...getFieldProps('gender', { initialValue: 'female' })}>
|
||||
<Radio value="male">男的</Radio>
|
||||
<Radio value="female">女的</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
id="remark"
|
||||
label="备注："
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 14 }}
|
||||
required
|
||||
help="随便写点什么">
|
||||
<Input type="textarea" placeholder="随便写" id="remark" name="remark" value={formData.remark} onChange={this.setValue.bind(this, 'remark')} />
|
||||
<Input type="textarea" placeholder="随便写" {...getFieldProps('remark')} />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
wrapperCol={{ span: 14, offset: 6 }} >
|
||||
<label>
|
||||
<Checkbox name="agreement" value={formData.agreement} onChange={this.setValue.bind(this, 'agreement')} />同意
|
||||
<Checkbox {...getFieldProps('agreement')} />同意
|
||||
</label>
|
||||
</FormItem>
|
||||
<Row>
|
||||
@ -87,5 +65,7 @@ const Demo = React.createClass({
|
||||
}
|
||||
});
|
||||
|
||||
Demo = Form.create()(Demo);
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
````
|
||||
|
||||
@ -10,41 +10,30 @@
|
||||
import { Form, Input, Button, Checkbox } from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
|
||||
const Demo = React.createClass({
|
||||
mixins: [Form.ValueMixin],
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
formData: {
|
||||
userName: undefined,
|
||||
password: undefined,
|
||||
agreement: undefined,
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
let Demo = React.createClass({
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
console.log('收到表单值：', this.state.formData);
|
||||
console.log('收到表单值：', this.props.form.getFieldsValue());
|
||||
},
|
||||
|
||||
render() {
|
||||
const formData = this.state.formData;
|
||||
const { getFieldProps } = this.props.form;
|
||||
return (
|
||||
<Form inline onSubmit={this.handleSubmit}>
|
||||
<FormItem
|
||||
id="userName"
|
||||
label="账户：">
|
||||
<Input placeholder="请输入账户名" id="userName" name="userName" onChange={this.setValue.bind(this, 'userName')} value={formData.userName} />
|
||||
<Input placeholder="请输入账户名"
|
||||
{...getFieldProps('userName')} />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
id="password"
|
||||
label="密码：">
|
||||
<Input type="password" placeholder="请输入密码" id="password" name="password" onChange={this.setValue.bind(this, 'password')} value={formData.password} />
|
||||
<Input type="password" placeholder="请输入密码"
|
||||
{...getFieldProps('password')} />
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<label className="ant-checkbox-inline">
|
||||
<Checkbox name="agreement" value={formData.agreement} onChange={this.setValue.bind(this, 'agreement')} />记住我
|
||||
<Checkbox
|
||||
{...getFieldProps('agreement')} />记住我
|
||||
</label>
|
||||
</FormItem>
|
||||
<Button type="primary" htmlType="submit">登录</Button>
|
||||
@ -53,5 +42,7 @@ const Demo = React.createClass({
|
||||
}
|
||||
});
|
||||
|
||||
Demo = Form.create()(Demo);
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
````
|
||||
|
||||
@ -8,63 +8,42 @@
|
||||
|
||||
````jsx
|
||||
import { Form, Select, InputNumber, DatePicker, TimePicker, Switch, Radio,
|
||||
Slider, Button, message, Row, Col, Upload, Icon } from 'antd';
|
||||
Slider, Button, Row, Col, Upload, Icon } from 'antd';
|
||||
const FormItem = Form.Item;
|
||||
const Option = Select.Option;
|
||||
const RadioButton = Radio.Button;
|
||||
const RadioGroup = Radio.Group;
|
||||
|
||||
const Demo = React.createClass({
|
||||
mixins: [Form.ValueMixin],
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
formData: {
|
||||
inputNumber: undefined,
|
||||
static: '唧唧复唧唧木兰当户织呀',
|
||||
switch: undefined,
|
||||
slider: undefined,
|
||||
select: undefined,
|
||||
startDate: undefined,
|
||||
endDate: undefined,
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
handleUpload(info) {
|
||||
if (info.file.status !== 'uploading') {
|
||||
console.log(info.file, info.fileList);
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
message.success(info.file.name + ' 上传成功。');
|
||||
} else if (info.file.status === 'error') {
|
||||
message.error(info.file.name + ' 上传失败。');
|
||||
}
|
||||
},
|
||||
|
||||
let Demo = React.createClass({
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
console.log('收到表单值：', this.state.formData);
|
||||
console.log('收到表单值：', this.props.form.getFieldsValue());
|
||||
},
|
||||
|
||||
normFile(e) {
|
||||
if (Array.isArray(e)) {
|
||||
return e;
|
||||
}
|
||||
return e && e.fileList;
|
||||
},
|
||||
|
||||
render() {
|
||||
const formData = this.state.formData;
|
||||
const { getFieldProps } = this.props.form;
|
||||
return (
|
||||
<Form horizontal onSubmit={this.handleSubmit} >
|
||||
<FormItem
|
||||
label="InputNumber 数字输入框："
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 10 }}
|
||||
required>
|
||||
<InputNumber min={1} max={10} style={{ width: 100 }} defaultValue={3} name="inputNumber" onChange={this.setValue.bind(this, 'inputNumber')} value={formData.inputNumber} />
|
||||
wrapperCol={{ span: 10 }}>
|
||||
<InputNumber min={1} max={10} style={{ width: 100 }}
|
||||
{...getFieldProps('inputNumber', { initialValue: 3 })} />
|
||||
<span className="ant-form-text"> 台机器</span>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="我是标题："
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 10 }}
|
||||
required>
|
||||
wrapperCol={{ span: 10 }}>
|
||||
<p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p>
|
||||
<p className="ant-form-text">
|
||||
<a href="#">链接文字</a>
|
||||
@ -76,7 +55,7 @@ const Demo = React.createClass({
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 10 }}
|
||||
required>
|
||||
<Switch name="switch" onChange={this.setValue.bind(this, 'switch')} value={formData.switch} />
|
||||
<Switch {...getFieldProps('switch')} />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
@ -84,7 +63,7 @@ const Demo = React.createClass({
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 10 }}
|
||||
required>
|
||||
<Slider marks={['A', 'B', 'C', 'D', 'E', 'F', 'G']} name="slider" onChange={this.setValue.bind(this, 'slider')} />
|
||||
<Slider marks={['A', 'B', 'C', 'D', 'E', 'F', 'G']} {...getFieldProps('slider')}/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
@ -92,7 +71,8 @@ const Demo = React.createClass({
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
required>
|
||||
<Select defaultValue="lucy" style={{ width: 200 }} name="select" onChange={this.setValue.bind(this, 'select')} value={formData.select}>
|
||||
<Select style={{ width: 200 }}
|
||||
{...getFieldProps('select')}>
|
||||
<Option value="jack">jack</Option>
|
||||
<Option value="lucy">lucy</Option>
|
||||
<Option value="disabled" disabled>disabled</Option>
|
||||
@ -105,13 +85,13 @@ const Demo = React.createClass({
|
||||
labelCol={{ span: 8 }}
|
||||
required>
|
||||
<Col span="6">
|
||||
<DatePicker name="startDate" onChange={this.setValue.bind(this, 'startDate')} value={formData.startDate} />
|
||||
<DatePicker {...getFieldProps('startDate')}/>
|
||||
</Col>
|
||||
<Col span="1">
|
||||
<p className="ant-form-split">-</p>
|
||||
</Col>
|
||||
<Col span="6">
|
||||
<DatePicker name="endDate" onChange={this.setValue.bind(this, 'endDate')} value={formData.endDate} />
|
||||
<DatePicker {...getFieldProps('endDate')} />
|
||||
</Col>
|
||||
</FormItem>
|
||||
|
||||
@ -120,13 +100,13 @@ const Demo = React.createClass({
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
required>
|
||||
<TimePicker />
|
||||
<TimePicker {...getFieldProps('time')}/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="选项："
|
||||
labelCol={{ span: 8 }}>
|
||||
<RadioGroup defaultValue="a">
|
||||
<RadioGroup {...getFieldProps('rg')}>
|
||||
<RadioButton value="a">选项一</RadioButton>
|
||||
<RadioButton value="b">选项二</RadioButton>
|
||||
<RadioButton value="c">选项三</RadioButton>
|
||||
@ -138,7 +118,12 @@ const Demo = React.createClass({
|
||||
labelCol={{ span: 8 }}
|
||||
wrapperCol={{ span: 16 }}
|
||||
help="提示信息要长长长长长长长长长长长长长长">
|
||||
<Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}>
|
||||
<Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}
|
||||
{...getFieldProps('upload', {
|
||||
valuePropName: 'fileList',
|
||||
normalize: this.normFile
|
||||
})}
|
||||
>
|
||||
<Button type="ghost">
|
||||
<Icon type="upload" /> 点击上传
|
||||
</Button>
|
||||
@ -154,5 +139,7 @@ const Demo = React.createClass({
|
||||
}
|
||||
});
|
||||
|
||||
Demo = Form.create()(Demo);
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
````
|
||||
|
||||
@ -77,7 +77,7 @@ class BasicDemo extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isFieldValidating, getFieldError } = this.props.form;
|
||||
const { getFieldProps } = this.props.form;
|
||||
|
||||
return (
|
||||
<Form horizontal form={this.props.form}>
|
||||
@ -85,53 +85,49 @@ class BasicDemo extends React.Component {
|
||||
label="用户名："
|
||||
labelCol={{ span: 7 }}
|
||||
wrapperCol={{ span: 12 }}
|
||||
hasFeedback
|
||||
id="name"
|
||||
fieldOption={{
|
||||
rules: [
|
||||
{ required: true, min: 5, message: '用户名至少为 5 个字符' },
|
||||
{ validator: this.userExists },
|
||||
],
|
||||
}}
|
||||
help={isFieldValidating('name') ? '正在校验中..' : (getFieldError('name') || []).join(', ')}>
|
||||
<Input placeholder="实时校验，输入 JasonWood 看看" />
|
||||
hasFeedback>
|
||||
<Input placeholder="实时校验，输入 JasonWood 看看"
|
||||
{...getFieldProps('name', {
|
||||
rules: [
|
||||
{ required: true, min: 5, message: '用户名至少为 5 个字符' },
|
||||
{ validator: this.userExists },
|
||||
],
|
||||
})}/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="邮箱："
|
||||
labelCol={{ span: 7 }}
|
||||
wrapperCol={{ span: 12 }}
|
||||
hasFeedback
|
||||
id="email"
|
||||
fieldOption={{
|
||||
validate: [{
|
||||
rules: [
|
||||
{ required: true },
|
||||
],
|
||||
trigger: 'onBlur',
|
||||
}, {
|
||||
rules: [
|
||||
{ type: 'email', message: '请输入正确的邮箱地址' },
|
||||
],
|
||||
trigger: ['onBlur', 'onChange'],
|
||||
}]
|
||||
}}>
|
||||
<Input type="email" placeholder="onBlur 与 onChange 相结合" />
|
||||
hasFeedback>
|
||||
<Input type="email" placeholder="onBlur 与 onChange 相结合"
|
||||
{...getFieldProps('email', {
|
||||
validate: [{
|
||||
rules: [
|
||||
{ required: true },
|
||||
],
|
||||
trigger: 'onBlur',
|
||||
}, {
|
||||
rules: [
|
||||
{ type: 'email', message: '请输入正确的邮箱地址' },
|
||||
],
|
||||
trigger: ['onBlur', 'onChange'],
|
||||
}]
|
||||
})}/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="密码："
|
||||
labelCol={{ span: 7 }}
|
||||
wrapperCol={{ span: 12 }}
|
||||
hasFeedback
|
||||
id="passwd"
|
||||
fieldOption={{
|
||||
rules: [
|
||||
{ required: true, whitespace: true, message: '请填写密码' },
|
||||
{ validator: this.checkPass.bind(this) },
|
||||
],
|
||||
}}>
|
||||
hasFeedback>
|
||||
<Input type="password" autoComplete="off"
|
||||
{...getFieldProps('passwd', {
|
||||
rules: [
|
||||
{ required: true, whitespace: true, message: '请填写密码' },
|
||||
{ validator: this.checkPass.bind(this) },
|
||||
],
|
||||
})}
|
||||
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}/>
|
||||
</FormItem>
|
||||
|
||||
@ -139,32 +135,30 @@ class BasicDemo extends React.Component {
|
||||
label="确认密码："
|
||||
labelCol={{ span: 7 }}
|
||||
wrapperCol={{ span: 12 }}
|
||||
hasFeedback
|
||||
id="rePasswd"
|
||||
fieldOption={{
|
||||
rules: [{
|
||||
required: true,
|
||||
whitespace: true,
|
||||
message: '请再次输入密码',
|
||||
}, {
|
||||
validator: this.checkPass2.bind(this),
|
||||
}],
|
||||
}}>
|
||||
hasFeedback>
|
||||
<Input type="password" autoComplete="off" placeholder="两次输入密码保持一致"
|
||||
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
|
||||
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
|
||||
{...getFieldProps('rePasswd', {
|
||||
rules: [{
|
||||
required: true,
|
||||
whitespace: true,
|
||||
message: '请再次输入密码',
|
||||
}, {
|
||||
validator: this.checkPass2.bind(this),
|
||||
}],
|
||||
})}/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="备注："
|
||||
labelCol={{ span: 7 }}
|
||||
wrapperCol={{ span: 12 }}
|
||||
id="textarea"
|
||||
fieldOption={{
|
||||
rules: [
|
||||
{ required: true, message: '真的不打算写点什么吗？' },
|
||||
],
|
||||
}}>
|
||||
<Input type="textarea" placeholder="随便写" id="textarea" name="textarea" />
|
||||
wrapperCol={{ span: 12 }}>
|
||||
<Input type="textarea" placeholder="随便写" id="textarea" name="textarea"
|
||||
{...getFieldProps('textarea', {
|
||||
rules: [
|
||||
{ required: true, message: '真的不打算写点什么吗？' },
|
||||
],
|
||||
})}/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem wrapperCol={{ span: 12, offset: 7 }} >
|
||||
@ -177,7 +171,7 @@ class BasicDemo extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
BasicDemo = createForm({})(BasicDemo);
|
||||
BasicDemo = createForm()(BasicDemo);
|
||||
|
||||
ReactDOM.render(<BasicDemo />, mountNode);
|
||||
````
|
||||
@ -121,6 +121,7 @@ let Demo = React.createClass({
|
||||
},
|
||||
|
||||
render() {
|
||||
const { getFieldProps } = this.props.form;
|
||||
return (
|
||||
<Form horizontal form={this.props.form}>
|
||||
<Row>
|
||||
@ -128,15 +129,14 @@ let Demo = React.createClass({
|
||||
<FormItem
|
||||
label="密码："
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 18 }}
|
||||
id="pass"
|
||||
fieldOption={{
|
||||
rules: [
|
||||
{ required: true, whitespace: true, message: '请填写密码' },
|
||||
{ validator: this.checkPass }
|
||||
]
|
||||
}}>
|
||||
wrapperCol={{ span: 18 }}>
|
||||
<Input type="password"
|
||||
{...getFieldProps('pass', {
|
||||
rules: [
|
||||
{ required: true, whitespace: true, message: '请填写密码' },
|
||||
{ validator: this.checkPass }
|
||||
]
|
||||
})}
|
||||
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
|
||||
autoComplete="off"/>
|
||||
</FormItem>
|
||||
@ -151,18 +151,17 @@ let Demo = React.createClass({
|
||||
<FormItem
|
||||
label="确认密码："
|
||||
labelCol={{ span: 6 }}
|
||||
wrapperCol={{ span: 18 }}
|
||||
id="rePass"
|
||||
fieldOption={{
|
||||
rules: [{
|
||||
required: true,
|
||||
whitespace: true,
|
||||
message: '请再次输入密码',
|
||||
}, {
|
||||
validator: this.checkPass2,
|
||||
}],
|
||||
}}>
|
||||
wrapperCol={{ span: 18 }}>
|
||||
<Input type="password"
|
||||
{...getFieldProps('rePass', {
|
||||
rules: [{
|
||||
required: true,
|
||||
whitespace: true,
|
||||
message: '请再次输入密码',
|
||||
}, {
|
||||
validator: this.checkPass2,
|
||||
}],
|
||||
})}
|
||||
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
|
||||
autoComplete="off" />
|
||||
</FormItem>
|
||||
|
||||
@ -58,19 +58,20 @@ let Demo = React.createClass({
|
||||
label: '杭州',
|
||||
}],
|
||||
}];
|
||||
const { getFieldProps } = this.props.form;
|
||||
return (
|
||||
<Form horizontal form={this.props.form}>
|
||||
<FormItem
|
||||
label="国籍："
|
||||
labelCol={{ span: 7 }}
|
||||
wrapperCol={{ span: 12 }}
|
||||
id="select"
|
||||
fieldOption={{
|
||||
rules: [
|
||||
{ required: true, message: '请选择您的国籍' }
|
||||
],
|
||||
}}>
|
||||
<Select placeholder="请选择国家" style={{ width: '100%' }}>
|
||||
wrapperCol={{ span: 12 }}>
|
||||
<Select placeholder="请选择国家" style={{ width: '100%' }}
|
||||
{...getFieldProps('select', {
|
||||
rules: [
|
||||
{ required: true, message: '请选择您的国籍' }
|
||||
],
|
||||
})}
|
||||
>
|
||||
<Option value="china">中国</Option>
|
||||
<Option value="use">美国</Option>
|
||||
<Option value="japan">日本</Option>
|
||||
@ -82,14 +83,14 @@ let Demo = React.createClass({
|
||||
<FormItem
|
||||
label="喜欢的颜色："
|
||||
labelCol={{ span: 7 }}
|
||||
wrapperCol={{ span: 12 }}
|
||||
id="multiSelect"
|
||||
fieldOption={{
|
||||
rules: [
|
||||
{ required: true, message: '请选择您喜欢的颜色', type: 'array' },
|
||||
]
|
||||
}}>
|
||||
<Select multiple placeholder="请选择颜色" style={{ width: '100%' }}>
|
||||
wrapperCol={{ span: 12 }}>
|
||||
<Select multiple placeholder="请选择颜色" style={{ width: '100%' }}
|
||||
{...getFieldProps('multiSelect', {
|
||||
rules: [
|
||||
{ required: true, message: '请选择您喜欢的颜色', type: 'array' },
|
||||
]
|
||||
})}
|
||||
>
|
||||
<Option value="red">红色</Option>
|
||||
<Option value="orange">橙色</Option>
|
||||
<Option value="yellow">黄色</Option>
|
||||
@ -101,14 +102,14 @@ let Demo = React.createClass({
|
||||
<FormItem
|
||||
label="性别："
|
||||
labelCol={{ span: 7 }}
|
||||
wrapperCol={{ span: 12 }}
|
||||
id="radio"
|
||||
fieldOption={{
|
||||
rules: [
|
||||
{ required: true, message: '请选择您的性别' }
|
||||
]
|
||||
}}>
|
||||
<RadioGroup>
|
||||
wrapperCol={{ span: 12 }}>
|
||||
<RadioGroup
|
||||
{...getFieldProps('radio', {
|
||||
rules: [
|
||||
{ required: true, message: '请选择您的性别' }
|
||||
]
|
||||
})}
|
||||
>
|
||||
<Radio value="male">男</Radio>
|
||||
<Radio value="female">女</Radio>
|
||||
</RadioGroup>
|
||||
@ -117,42 +118,42 @@ let Demo = React.createClass({
|
||||
<FormItem
|
||||
label="生日："
|
||||
labelCol={{ span: 7 }}
|
||||
wrapperCol={{ span: 12 }}
|
||||
id="birthday"
|
||||
fieldOption={{
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
type: 'date',
|
||||
message: '你的生日是什么呢?',
|
||||
}, {
|
||||
validator: this.checkBirthday,
|
||||
}
|
||||
]
|
||||
}}>
|
||||
<DatePicker />
|
||||
wrapperCol={{ span: 12 }}>
|
||||
<DatePicker
|
||||
{...getFieldProps('birthday', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
type: 'date',
|
||||
message: '你的生日是什么呢?',
|
||||
}, {
|
||||
validator: this.checkBirthday,
|
||||
}
|
||||
]
|
||||
})}
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="8~12间的质数："
|
||||
labelCol={{ span: 7 }}
|
||||
wrapperCol={{ span: 12 }}
|
||||
id="primeNumber"
|
||||
fieldOption={{
|
||||
rules: [{ validator: this.checkPrime }],
|
||||
}}>
|
||||
<InputNumber min={8} max={12} />
|
||||
wrapperCol={{ span: 12 }}>
|
||||
<InputNumber min={8} max={12}
|
||||
{...getFieldProps('primeNumber', {
|
||||
rules: [{ validator: this.checkPrime }],
|
||||
})}
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
label="选择地址："
|
||||
labelCol={{ span: 7 }}
|
||||
wrapperCol={{ span: 12 }}
|
||||
id="address"
|
||||
fieldOption={{
|
||||
rules: [{ required: true, type: 'array' }],
|
||||
}}>
|
||||
<Cascader options={address} />
|
||||
wrapperCol={{ span: 12 }}>
|
||||
<Cascader options={address}
|
||||
{...getFieldProps('address', {
|
||||
rules: [{ required: true, type: 'array' }],
|
||||
})}
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
|
||||
@ -78,32 +78,33 @@ CustomizedForm = Form.create({})(CustomizedForm);
|
||||
| getFieldError | 获取某个输入控件的 Error | Function(name) | | |
|
||||
| isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) | | |
|
||||
| resetFields | 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 | Function([names: string[]]) | | | |
|
||||
| getFieldProps 详见下面描述
|
||||
|
||||
#### this.props.form.getFieldProps(id, options)
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|
||||
|-----------|------------------------------------------|------------|-------|--------|
|
||||
| options.id | 必填输入控件唯一标志 | string | | |
|
||||
| options.valuePropName | 子节点的值的属性，如 Checkbox 的是 'checked' | string | | 'value' |
|
||||
| options.initialValue | 子节点的初始值，类型、可选值均由子节点决定 | | | |
|
||||
| options.trigger | 收集子节点的值的时机 | string | | 'onChange' |
|
||||
| options.validateTrigger | 校验子节点值的时机 | string | | 'onChange' |
|
||||
| options.rules | 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) | array | | | |
|
||||
|
||||
|
||||
### Form.Item
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|
||||
|-----------|------------------------------------------|------------|-------|--------|
|
||||
| id | 必须设置，且必须唯一 | string | | |
|
||||
| label | label 标签的文本 | string | | |
|
||||
| labelCol | label 标签布局，通 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` | object | | |
|
||||
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | object | | |
|
||||
| fieldOption | 配置校验规则等，详情请看下面备注。如果设置了 `fieldOption`，则 `Form.Item` 只能有一个子节点 | object | | |
|
||||
| help | 提示信息，如不设置，则会根据 `fieldOption` 中的校验规则自动生成 | string | | |
|
||||
| required | 是否必填，如不设置，则会根据 `fieldOption` 中的校验规则自动生成 | bool | | false |
|
||||
| validateStatus | 校验状态，如不设置，则会根据 `fieldOption` 中的校验规则自动生成 | string | 'success' 'warning' 'error' 'validating' | |
|
||||
| help | 提示信息，如不设置，则会根据校验规则自动生成 | string | | |
|
||||
| required | 是否必填，如不设置，则会根据校验规则自动生成 | bool | | false |
|
||||
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成 | string | 'success' 'warning' 'error' 'validating' | |
|
||||
| hasFeedback | 配合 validateStatus 属性使用，是否展示校验状态图标 | bool | | false |
|
||||
| prefixCls | 样式类名，默认为 ant-form，通常您不需要设置 | string | | 'ant-form' |
|
||||
|
||||
#### fieldOption
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 |默认值 |
|
||||
|-----------|------------------------------------------|------------|-------|--------|
|
||||
| valuePropName | 子节点的值的属性，如 Checkbox 的是 'checked' | string | | 'value' |
|
||||
| initialValue | 子节点的初始值，类型、可选值均由子节点决定 | | | |
|
||||
| trigger | 收集子节点的值的时机 | string | | 'onChange' |
|
||||
| validateTrigger | 校验子节点值的时机 | string | | 'onChange' |
|
||||
| rules | 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) | array | | | |
|
||||
|
||||
|
||||
### Input
|
||||
|
||||
|
||||
@ -206,7 +206,7 @@ const AntUpload = React.createClass({
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if ('fileList' in nextProps) {
|
||||
this.setState({
|
||||
fileList: nextProps.fileList
|
||||
fileList: nextProps.fileList || [],
|
||||
});
|
||||
}
|
||||
},
|
||||
@ -235,14 +235,14 @@ const AntUpload = React.createClass({
|
||||
uploadList = (
|
||||
<UploadList listType={this.props.listType}
|
||||
items={this.state.fileList}
|
||||
onRemove={this.handleManualRemove} />
|
||||
onRemove={this.handleManualRemove}/>
|
||||
);
|
||||
}
|
||||
if (type === 'drag') {
|
||||
let dragUploadingClass = this.state.fileList.some(file => file.status === 'uploading')
|
||||
? `${prefixCls}-drag-uploading` : '';
|
||||
? `${prefixCls}-drag-uploading` : '';
|
||||
let draggingClass = this.state.dragState === 'dragover'
|
||||
? `${prefixCls}-drag-hover` : '';
|
||||
? `${prefixCls}-drag-hover` : '';
|
||||
return (
|
||||
<span className={this.props.className}>
|
||||
<div className={prefixCls + ' ' + prefixCls + '-drag '
|
||||
|
||||
Loading…
Reference in New Issue
Block a user