ant-design form
Posted mynodejs
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ant-design form相关的知识,希望对你有一定的参考价值。
表单配置
示例代码
import { Form } from ‘antd‘;
const FormItem = Form.Item;
class NormalLoginForm extends React.Component {
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log(‘Received values of form: ‘, values);
}
});
}
render() {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit} className="login-form">
<FormItem>
{getFieldDecorator(‘userName‘, {
rules: [{ required: true, message: ‘Please input your username!‘ }],
})(
<Input prefix={<Icon type="user" style={{ color: ‘rgba(0,0,0,.25)‘ }} />} placeholder="Username" />
)}
</FormItem>
<FormItem>
{getFieldDecorator(‘password‘, {
rules: [{ required: true, message: ‘Please input your Password!‘ }],
})(
<Input prefix={<Icon type="lock" style={{ color: ‘rgba(0,0,0,.25)‘ }} />} type="password" placeholder="Password" />
)}
</FormItem>
<FormItem>
{getFieldDecorator(‘remember‘, {
valuePropName: ‘checked‘,
initialValue: true,
})(
<Checkbox>Remember me</Checkbox>
)}
<a className="login-form-forgot" href="">Forgot password</a>
<Button type="primary" htmlType="submit" className="login-form-button">
Log in
</Button>
Or <a href="">register now!</a>
</FormItem>
</Form>
);
}
}
const WrappedNormalLoginForm = Form.create()(NormalLoginForm);
ReactDOM.render(<WrappedNormalLoginForm />, mountNode);
FormItem
const FormItem = Form.Item;
封装过的表单域
<FormItem {...formItemLayout} label="Name">
{getFieldDecorator(‘username‘, {
rules: [{
required: true,
message: ‘Please input your name‘,
}],
})(
<Input placeholder="Please input your name" />
)}
</FormItem>
支持label属性
通过getFieldDecorator返回封装好的表单域
getFieldDecorator(id,options)
id唯一,
options.initialValue 子节点的初始值
options.rules 校验规则
options.valuePropName 子节点的值的属性,如 Switch 的是 ‘checked‘
获取表单域值
this.props.form.getFieldValue(‘password‘)
表单域值的校验
this.props.form.validateFields((err, values) => {
if (!err) {
console.log(‘Received values of form: ‘, values);
}
});
传一个函数,第二个参数是表单域值的集合
重置表单域的值
this.props.form.resetFields();
setFieldsValue
使用 setFieldsValue 来动态设置其他控件的值。
this.props.form.setFieldsValue({
note: `Hi, ${value === ‘male‘ ? ‘man‘ : ‘lady‘}!`,
});
循环表单
import { Form, Row, Col, Input, Button, Icon } from ‘antd‘;
const FormItem = Form.Item;
class AdvancedSearchForm extends React.Component {
state = {
expand: false,
};
handleSearch = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
console.log(‘Received values of form: ‘, values);
});
}
handleReset = () => {
this.props.form.resetFields();
}
toggle = () => {
const { expand } = this.state;
this.setState({ expand: !expand });
}
// To generate mock Form.Item
getFields() {
const count = this.state.expand ? 10 : 6;
const { getFieldDecorator } = this.props.form;
const children = [];
for (let i = 0; i < 10; i++) {
children.push(
<Col span={8} key={i} style={{ display: i < count ? ‘block‘ : ‘none‘ }}>
<FormItem label={`Field ${i}`}>
{getFieldDecorator(`field-${i}`, {
rules: [{
required: true,
message: ‘Input something!‘,
}],
})(
<Input placeholder="placeholder" />
)}
</FormItem>
</Col>
);
}
return children;
}
render() {
return (
<Form
className="ant-advanced-search-form"
onSubmit={this.handleSearch}
>
<Row gutter={24}>{this.getFields()}</Row>
<Row>
<Col span={24} style={{ textAlign: ‘right‘ }}>
<Button type="primary" htmlType="submit">Search</Button>
<Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
Clear
</Button>
<a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.toggle}>
Collapse <Icon type={this.state.expand ? ‘up‘ : ‘down‘} />
</a>
</Col>
</Row>
</Form>
);
}
}
const WrappedAdvancedSearchForm = Form.create()(AdvancedSearchForm);
ReactDOM.render(
<div>
<WrappedAdvancedSearchForm />
<div className="search-result-list">Search Result List</div>
</div>,
mountNode
);
动态增减表单
import { Form, Input, Icon, Button } from ‘antd‘;
const FormItem = Form.Item;
let uuid = 0;
class DynamicFieldSet extends React.Component {
remove = (k) => {
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue(‘keys‘);
// We need at least one passenger
if (keys.length === 1) {
return;
}
// can use data-binding to set
form.setFieldsValue({
keys: keys.filter(key => key !== k),
});
}
add = () => {
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue(‘keys‘);
const nextKeys = keys.concat(uuid);
uuid++;
// can use data-binding to set
// important! notify form to detect changes
form.setFieldsValue({
keys: nextKeys,
});
}
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log(‘Received values of form: ‘, values);
}
});
}
render() {
const { getFieldDecorator, getFieldValue } = this.props.form;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 },
},
};
const formItemLayoutWithOutLabel = {
wrapperCol: {
xs: { span: 24, offset: 0 },
sm: { span: 20, offset: 4 },
},
};
getFieldDecorator(‘keys‘, { initialValue: [] });
const keys = getFieldValue(‘keys‘);
const formItems = keys.map((k, index) => {
return (
<FormItem
{...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
label={index === 0 ? ‘Passengers‘ : ‘‘}
required={false}
key={k}
>
{getFieldDecorator(`names[${k}]`, {
validateTrigger: [‘onChange‘, ‘onBlur‘],
rules: [{
required: true,
whitespace: true,
message: "Please input passenger‘s name or delete this field.",
}],
})(
<Input placeholder="passenger name" style={{ width: ‘60%‘, marginRight: 8 }} />
)}
{keys.length > 1 ? (
<Icon
className="dynamic-delete-button"
type="minus-circle-o"
disabled={keys.length === 1}
onClick={() => this.remove(k)}
/>
) : null}
</FormItem>
);
});
return (
<Form onSubmit={this.handleSubmit}>
{formItems}
<FormItem {...formItemLayoutWithOutLabel}>
<Button type="dashed" onClick={this.add} style={{ width: ‘60%‘ }}>
<Icon type="plus" /> Add field
</Button>
</FormItem>
<FormItem {...formItemLayoutWithOutLabel}>
<Button type="primary" htmlType="submit">Submit</Button>
</FormItem>
</Form>
);
}
}
const WrappedDynamicFieldSet = Form.create()(DynamicFieldSet);
ReactDOM.render(<WrappedDynamicFieldSet />, mountNode);
以上是关于ant-design form的主要内容,如果未能解决你的问题,请参考以下文章
React & Ant-Design 应用 —— Form.item 的 name和rules;为什么设置required不显示
React & Ant-Design 应用 —— Form.item 的 name和rules;为什么设置required不显示