Table使用中的一些坑

通过外部的Input及Button触发filter：

import { inject, observer } from 'mobx-react';
import React, { Component } from 'react';
import { hashHistory, Link } from 'react-router';
import 'antd/dist/antd.css';
import { Row, Col, Icon, Button, Input, Table, Tooltip } from 'antd';
import './index.less';

const { Option } = Select;

class TableDataDemo extends Component {
  constructor(props){
    super(props);
    this.state = {
      searchText: '',
      jedi: [],
      searchfield: '',
      showOrHide: '',
    };
  }
  
  /**
   * 
   * @param {*} event
   * 搜索
   */
  onSearchChange = (event) => {
    this.setState({searchfield: event.target.value})
  }
  
  /**
   * 
   * @param {*} e
   * 显示隐藏internal
   */
  showOrHideClick = (e) => {
    const { showOrHide } = this.state;
    if (showOrHide === '') {
      this.setState({showOrHide: false});
    }else {
      this.setState({showOrHide: ''});
    }
  }
  
  render() {
    const columns = [{
      title: '范围',
      dataIndex: 'internal',
      key: 'internal',
      filtered: true,
      filters: [{
        text: 'internal',
        value: true,
      }, {
        text: 'public',
        value: false,
      }],
      onFilter: (value, record) => { 
        const flag = value == "false" ? false : true;
        return record.internal == flag ? true : false
      },
      render: internal => (
        <div>
          {
            internal ? <span className="internal">内部</span> : <span className="public">公开</span>
          }
        </div>
      ),
    },{
      title: '名字',
      dataIndex: '',
      key: 'qualifiedTypeName',
      render: data => (
        <div className="qualifiedTypeName">
          <a href={`https://www.baidu.com/classes/${data.type.qualifiedTypeName}`} target="_blank">{data.type.qualifiedTypeName}</a>
          <p>{data.comment.comment}</p>
        </div>
      ),
    },{
      title: '分层',
      dataIndex: 'layer',
      key: 'layer',
      render: layer => (
        <div>
          <span className="layer">{layer}</span>
        </div>
      ),
      // ...this.getColumnSearchProps('layer'),
    }];
    const { jedi, searchfield, showOrHide } = this.state;//jedi是tableData、searchfield是用户查询的inputValue、showOrHide值为false或者空字符串，当为false时即过滤internal字段为true的那行
    const filteredCharacters = jedi.filter(jedi =>{//filteredCharacters为过滤后的table的dataSource
      // const newData = Object.values(jedi);
      // return JSON.stringify(newData).toLowerCase().includes(searchfield.toLowerCase());
      return jedi['type']['qualifiedTypeName'].toString().toLowerCase().includes(searchfield.toLowerCase())
    }).filter(res => {
      return res['internal'].toString().toLowerCase().includes(showOrHide);;
    });
    return (
      <div>
        <Row>
          <Col span={24}>
            <Button type="primary" className="showInternalToggle" onClick={(e) => this.showOrHideClick(e)}>{`${showOrHide === false ? '显示Internal' : '隐藏Internal'}`}</Button>
          </Col>
          <Col span={24}>
            <Row>
              <Col span={24}>
                <label>搜索:<Input placeholder="输入name进行搜索" onChange = {this.onSearchChange} value={searchfield} /></label>
              </Col>
              <Col span={24}>
                <Table columns={columns} rowKey={record => record.type.simpleName} dataSource={filteredCharacters} key="serviceDetailsTable" />
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    )
  }
}

export default TableDataDemo;