一、使用描述

　　對於復選框組件來說，主要的問題在於，勾選後返回的值要處理為數字，傳遞給接口，接口返回的值也是數字，但是在前臺做回顯時在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‘就可以搞定。

項目實戰之FORM、復選框組件的實現