antd使用小结- table 和 form

Form使用中用到的一些方法

 const { getFieldDecorator } = this.props.form;
 <Col xs={6} sm={6} md={6} xl={6}>
            <FormItem label="选择区域">
              {getFieldDecorator('area', {
                rules: []
              })(
                <Select
                  placeholder="选择区域"
                  allowClear={true}
                  showSearch={true}
                  filterOption={(input, option) => {
                    option.props.children
                      .toString()
                      .toLowerCase()
                      .indexOf(input.toLowerCase()) >= 0;
                  }}
                  onChange={this.areaSelectChange}
                >
                  {areaArr.map((item) => (
                    <Option value={item.nodeId} key={item.nodeId.toString()}>
                      {item.nodeName}
                    </Option>
                  ))}
                </Select>
              )}
            </FormItem>
          </Col>
          <Col xs={6} sm={6} md={6} xl={6}>
            <FormItem label="选择省份">
              {getFieldDecorator('province', {
                rules: []
              })(
                <Select
                  placeholder="请选择省份"
                  allowClear={true}
                  showSearch
                  filterOption={(input, option) =>
                    option.props.children
                      .toString()
                      .toLowerCase()
                      .indexOf(input.toLowerCase()) >= 0
                  }
                  onChange={this.provinceSelectChange}
                >
                  {provinceArr.map((item) => (
                    <Option value={item.nodeId} key={item.nodeId.toString()}>
                      {item.nodeName}
                    </Option>
                  ))}
                </Select>
              )}
            </FormItem>
          </Col>

• 其中 {getFieldDecorator(‘area’, {
  rules: []
  })
  方法中area是当前form内表单控件的唯一标识id，这个是自定义的。

• rules的作用是用来判断当前表单控件是否是必输项以及未输入时提示内容
  rules: [
  {
  required: true,
  message: ‘请输入标题!’
  }
  ]

• filterOption这个方法是用来对输入的内容做过滤匹配的，如果input输入的内容在下拉框可选集中，则输入时，下拉框中帅选出与之匹配的对应项，供用户选择
  filterOption={(input, option) => {
  option.props.children
  .toString()
  .toLowerCase()
  .indexOf(input.toLowerCase()) >= 0;
  }}

• getFieldValue 是在提交表单的时候用来获取当前form表单中各个框内选择的或者填写的值，在使用这个方法的前提是：在formItem 中使用getFieldDecorator用来定义各个表单的唯一id

const { getFieldValue } = this.props.form;
let hospitalName = getFieldValue('hospitalName');

• resetFields()是重置初始化所有表单

this.props.form.resetFields();

• this.props.form.setFieldsValue是改变表单中某项的值，可用在联动表单选择项中

this.props.form.setFieldsValue({ province: undefined, city: undefined });

Table 中columns 中对排序的设置

• sortOrder是排序规则的属性，官网给出的值为’ascend’ | ‘descend’ | false （string | boolean）
  但是在ts中直接给columns这么设置却是有问题，报语法错误，但由于没有找到报错原因，只能在columns前面使用
  //@ts-ignore,其中sortOrder通过state去控制改变，在Table的属性上有onchange方法，onchang有三个属性，分页、排序、筛选变化时触发方法，所以排序规则如果变化，则可以在onchange中得到变化后的规则，值得注意的是：如果没有排序规则，则onchange中返回的是undefined。
• 在开发过程中遇到一个问题，columns被写在render外边，导致里边的sortOrder变化不更新，因为columns写在render外边相当于一个常量，所以state变化时不会被重新渲染更新，所以columns中有变量的情况下，需要放在render中。
• 排序的时候遇到一个问题：排序的一列数据并不是每一行都有，使用a.monthAverageClickRate - b.monthAverageClickRate这样的写法后，遇到没有数据的行后，没有数据后边的排序就乱了，在没有数据之后就重新排列了，而不是全局排列。所以在写排序方法的时候，在没有数据的地方把它等价于0就可以了：(a.monthAverageClickRate || 0) - (b.monthAverageClickRate || 0)

sortChange = (a, b, c) => {
    this.setState({
      sortOrder: c.order || false
    });
  };


{
    title: '月平均点击率',
    dataIndex: 'monthAverageClickRate',
    render: (text) => <p>{text && text.toFixed(1) + '%'}</p>,
    sortOrder: sortOrder,
    sorter: (a, b, c) =>
      (a.monthAverageClickRate || 0) - (b.monthAverageClickRate || 0)
  }

<Table
//@ts-ignore
 columns={columns}
  dataSource={hospitalsList}
  rowKey="id"
  pagination={{
    current: pageNum,
    onChange: this.pageOnchange.bind(this)
  }}
  onChange={this.sortChange.bind(this)}
/>