antd

1. table滚动条不出现。

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

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

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

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为[],即可。 

 

你可能感兴趣的:(antd)