关于ant-Design的一些问题
这里是一些我曾遇到的坑,自勉,由于自己是小白,文档中的一些参数用法并不看不懂具体怎么用,所以对一些我用到了的参数进行了尽可能的详细的用法实例,希望也能给想我一样不是看的太懂,文档的小白一些帮助:
- 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,
})
最后
用了挺久才开始写的,写的有点晚了,然后还有很多没补充,后面再补充吧。