标签：and struct 操作 ted this check layout created tail
一、使用描述
对于复选框组件来说，主要的问题在于，勾选后返回的值要处理为数字，传递给接口，接口返回的值也是数字，但是在前台做回显时在table中数据格式需要转义为文字或者在form中数据格式需要回显在复选框中。
二、功能代码
1，转为数字1为勾选，0为未勾选
constructor(props) {
super(props);
this.state = {
checkStatus: 0
}
}
//选中是true值转为1,否则就是0
handleIsChecked = (e) => {
this.setState({
checkStatus: e.target.checked ? 1: 0
})
}
<FormItem {...tailFormItemLayout} style={{marginBottom: 8}}>
{getFieldDecorator(‘isHash‘, {
valuePropName: ‘checked‘
})(
<Checkbox onChange={self.handleIsChecked.bind(this)}>是否hash存储</Checkbox>
)}
</FormItem>
最终传值时使用checkStatus
2.在table中回显
const columns = [{
title: ‘ID‘,
dataIndex: ‘id‘,
key: ‘id‘,
}, {
title: ‘key值‘,
dataIndex: ‘cacheKey‘,
key: ‘cacheKey‘,
}, {
title: ‘key值含义描述‘,
dataIndex: ‘keyDesc‘,
key: ‘keyDesc‘,
}, {
title: ‘所属redis集群‘,
dataIndex: ‘belongCluster‘,
key: ‘belongCluster‘,
}, {
title: ‘是否hash存储‘,
dataIndex: ‘isHash‘,
key: ‘isHash‘,
render: (text, record) => (
record.isHash == 1 ? ‘是‘:‘否‘
),
}, {
title: ‘创建时间‘,
dataIndex: ‘created‘,
key: ‘created‘,
render: (text, record) => (
moment(text).format(‘YYYY-MM-DD‘)
),
}, {
title: ‘修改时间‘,
dataIndex: ‘modified‘,
key: ‘modified‘,
render: (text, record) => (
moment(text).format(‘YYYY-MM-DD‘)
),
}, {
title: ‘操作‘,
key: ‘action‘,
render: (text, record) => (
<span>
<a href="javascript:return false;" onClick={self.onClickUpdate.bind(this, record)}>修改</a>
<span className="ant-divider"/>
<a href="javascript:return false;" onClick={self.onClickDelete.bind(this, record.id)}>删除</a>
</span>
),
}];
在定义table的列时，可以添加render()方法，render: (text, record) => (record.isHash == 1 ? ‘是‘:‘否‘),就可以实现对应文字的回显。
3.在form中回显
比如点击修改某一条记录，则需要将复选框是否勾选的状态会显出来。说到这点不得不佩服ant，封装得真是太好了。只要添加一个属性就可以实现。如下：
<FormItem {...tailFormItemLayout} style={{marginBottom: 8}}>
{getFieldDecorator(‘isHash‘, {
valuePropName: ‘checked‘
})(
<Checkbox onChange={self.handleIsChecked.bind(this)}>是否hash存储</Checkbox>
)}
</FormItem>
valuePropName:‘checked‘就可以搞定。
标签：and struct 操作 ted this check layout created tail
原文地址：http://www.cnblogs.com/wangyajin/p/7078060.html
