antd组件库的使用

1.modal

a.确定框是直接在函数中编写弹出，不需要在页面中有dom

// 触发evaluateClick函数，页面直接弹框
evaluateClick(id) {
    // 评价弹框
    Modal.confirm({
        maskClosable: false,
        centered: true,
        iconType: ' ',
        okText: '提交',
        cancelText: '取消',
        title: '检测结果评价',
        onOk: () => {},
        onCancel: () => {},
        content: (
            <Radio.Group  defaultValue={1}>
                {
                    this.isCorrect.map(item => item.key ? (<Radio value={item.key}>{item.name}</Radio>) : '')
                }
            </Radio.Group>
        )
    })
}

2.table

a.columns的dataIndex属性<=>elementyUI表格的colunm的prop属性，与后台返回的字段对应，显示相应的内容

const columns = [{ title: 'createDate', dataIndex: 'createDate', key: 'createDate' },]

b.columns的属性在vue中是customRender，在react中是render

c.table记得设置rowKey='detectId'，否则报错

b.表格多选功能,通过rowSelection.selectedRowKeys来控制选中项

// 表格默认勾选1,2,3,项
const rowSelection =  { selectedRowKeys="1,2,3" }
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />

3.Form表单

a.getFieldDecorator工具

你不再需要也不应该用onChange来做同步，但还是可以继续监听onChange等事件。
你不能用控件的value，defaultValue等属性来设置表单域的值，默认值可以用getFieldDecorator里的initialValue。
你不应该用setState，可以使用this.props.form.setFieldsValue来动态改变表单值。（表单联动）

注意：括号的位置
需求：测试集加训练集总和为100.一个变大，另一个相应变小

// ****报错browser.js?e834:49 Warning: You cannot set a form field before rendering a field associated with the value.

trainPercentOnChange (e) {   // 表单联动：setFieldsValue设置form的值；numberHandle.floatSub（）相加为100的函数
  this.form.setFieldsValue({  
    'modelParam2.testPercent': numberHandle.floatSub(100, e)   
  })
},

<Form.Item label='训练集' {...formItemLayout}>
    {
        getFieldDecorator(`modelParam2.trainPercent`, {
            initialValue: 80
        })(
            <InputNumber
                suffix='%'
                onChange={this.trainPercentOnChange}
            />
        )
    }
</Form.Item>

<Form.Item label='测试集' {...formItemLayout}>
    getFieldDecorator(`modelParams2.testPercent`, {
        initialValue: 20
    })
    (<Input disabled style='width:80px;' suffix='%'/>)
</Form.Item>

// 正确（更改括号位置）
<Form.Item label='测试集' {...formItemLayout}>
    getFieldDecorator(`modelParams2.testPercent`, {
        initialValue: 20
    })(
    <Input disabled style='width:80px;' suffix='%'/>)
</Form.Item>