antd

1. table滚动条不出现。

.ant-table-body {
   overflow: auto;
}

如果在垂直区域设置滚动条,设置scroll={{y:400}},可能会导致表头和表体对不齐。那样在表头设置宽度。参考:

https://blog.csdn.net/YAOYU007/article/details/83026107

2.Table组件中设置列名为columns,个性化设置使用columns中的render,如:

columns:[
   {
     //text 当前行的数据,被dataIndex指定
     dataIndex: objName,
     render: (text, item) =>(<div>{text.orgId}</div>)
    }   
]

Table最重要属性:列表头columns,数据源dataSource和分页器pagination。Table中选择rowSelection选项,这个选项不要放在state对象中,重置选中的记录只需要把selectedRowKeys重置为空数组即可。

3.把父表单传递给子组件,在父组件中统一处理每个子组件表单的数据。父组件通过:

<!-- 父组件  -->
<Parent form=this.props.form>
<!-- 子组件 -->
<Form>
    <FormItem></FormItem>
</Form>

 4.FormItem  

  最重要的属性就是getFieldDecorator,用于和表单进行双向绑定。 下面摘要官网的说明:

经过 getFieldDecorator 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:

你不再需要也不应该用 onChange 来做同步,但还是可以继续监听 onChange 等事件。

你不能用控件的 value defaultValue 等属性来设置表单域的值,默认值可以用 getFieldDecorator 里的 initialValue。

你不应该用 setState,可以使用 this.props.form.setFieldsValue 来动态改变表单值。

 用法getFieldDecorator(id, options);options 中比较常用的参数是getValueFromEvent和trigger,trigger是用来收集子节点的值的时机,而getValueFromEvent是值的变化的回调函数,主要   getValueFromEvent函数需要有返回才能有效。

5.Radio.Group

该组件的子组件不能有Radio.Group,否则单选框选中就会发生冲突,另外defaultValue为初始渲染值,改变该值之后setState不会引起Radio的变化。

render事件不会触发onchange事件,只有value值改变了就会触发onchange事件。

6.DatePick 日期选择器

2点: 赋值如果没值设置为null, 有值设置用moment来包装,如:moment('1990-09-10');

7.Select中的option一定要设置值,否则initialValue设置的值就有bug, 如果要显示placeholder。initialValue要设置为undefined即可。

8.rc-form表单

  无论是col =1,2,3picker设置空值只需要initialValue为[],即可。 

9.upload组件

   upload比较复杂,校验和上传都是异步。校验是最后一步,也就是说在onchange事情执行完毕之后出发校验。同时注意rc-form不重复校验。也就是说。rules和validateFields只会校验一次。rules校验了,validateFields不会校验。

 

posted @ 2019-10-08 15:05  anthonyliu  阅读(637)  评论(0编辑  收藏  举报