关于ant-Design的一些问题

关于ant-Design的一些问题

这里是一些我曾遇到的坑，自勉，由于自己是小白，文档中的一些参数用法并不看不懂具体怎么用，所以对一些我用到了的参数进行了尽可能的详细的用法实例，希望也能给想我一样不是看的太懂，文档的小白一些帮助：

关于ant-Design的一些问题
form表单中值的操作
getFieldDecorator

validateFields

setFieldsValue

最后

Markdown和扩展Markdown简洁的语法

代码块高亮

图片链接和图片上传

LaTex数学公式

UML序列图和流程图

离线写博客

导入导出Markdown文件

丰富的快捷键

form表单中值的操作

1.

getFieldDecorator

首先说一下

getFieldDecorator

的用法，官网上说，这个方法是用于和表单进行双向绑定。

目前我们项目中实际

getFieldDecorator

的用法如下：

1.首先，声明getFieldDecorator ；

2.然后，

('name',{})

,name就是id，必填输入控件唯一标志，当然option就是’{}’这里面的东西了。

3.然后，在option中：rules 是校验规则，比如此段代码的意思是这个input框一定要有值，没有值的话就会显示“请输入项目名称”这句话.（其余的option参数请参考rules）

4.最后，在

('name',{})

后面的

()

中就是你的表单标签了，input，select啥的

render(){
const { getFieldDecorator } = this.props.form;
return(
<div className="steps-content">
<Row>
<Form onSubmit={this.handleSubmit}>
<FormItem>
<Col span={6}>
<strong>产品名称</strong>
</Col>
<Col span={16}>
{ getFieldDecorator('name',{
rules: [{ required: true, message: '请输入项目名称!' }],
})(
<Input placeholder="请输入项目名称"
style={{width:"100%"}}
/>
)}
</Col>
</FormItem>
</Form>
</Row>
</div>
)

2.

validateFields

validateFields

官网上的解释是：校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件。

因为我们的项目需要校验所有的form组件，所有目前我们的项目的实际用法如下：

直接获取所有输入域的值values以及err

this.props.form.validateFields((err, values) => {
if (!err) {
console.log("提交成功")
}else{
console.log("提交失败");
}
})

3.

setFieldsValue

setFieldsValue

官网上的解释是：设置一组输入控件的值（注意：不要在componentWillReceiveProps 内使用，否则会导致死循环）。

目前我们的项目的实际用法如下：

就像setState赋值一样，直接把值赋给

getFieldDecorator(id,option)

中的 id。这样就可以直接给Form中的任意表单赋值。

this.props.form.setFieldsValue({
name:basicV.name,
description:basicV.description,
info:basicV.info,
})

最后

用了挺久才开始写的，写的有点晚了，然后还有很多没补充，后面再补充吧。