项目实战之FORM复选框组件的实现

Posted 2020-09-25

　　一、使用描述

　　对于复选框组件来说，主要的问题在于，勾选后返回的值要处理为数字，传递给接口，接口返回的值也是数字，但是在前台做回显时在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‘就可以搞定。