custom-filter 文档

描述：针对于 react antd 表格组件中表头搜索，原则上支持所有 antd 及自定义 form 组件，如组件值与触发方法不是 value 及 onChange 则需要设置 valuePropName, validateTrigger

属性|描述 ---|:--: form| antd form 对象 form={this.props.form} title|显示名称 name|变量名称 initialValue|默认值 validator| form validator 验证方法 valuePropName|子节点的值的属性，如 Switch 的是 'checked' 默认 'value' validateTrigger|子节点的值的触发方法， 默认 'onChange' onOk|点击确定按钮的回调 overlayClassName|浮层类名 renderParent|是否渲染在父级

example

import React from 'react';
import ReactDOM from 'react-dom';
import {Form, Input, Select} from 'antd';
import { FormComponentProps } from 'antd/lib/form';
import CustomFilter from 'custom-filter';


interface DemoProps extends FormComponentProps{

}
class Demo extends React.Component<DemoProps,any>{
    constructor(props:DemoProps) {
        super(props);
    }
    render(){
        return <div>
            <CustomFilter
                title = '姓名'
                form = {this.props.form}
                name = 'name'
                initialValue = '我是默认值'
                onOk={(name, value, title) => {console.log(name, value, title)}}
                // valuePropName='initValue' 
                // validateTrigger='onSelect'
            >
                <Input />
            </CustomFilter>
            <CustomFilter
                title = '性别'
                form = {this.props.form}
                name = 'sex'
                initialValue = '1'
                onOk={(name, value, title) => {console.log(name, value, title)}}
                // valuePropName='initValue' 
                // validateTrigger='onSelect'
            >
                <Select style={{width: 120}}>
                    <Select.Option value='1'>男</Select.Option>
                    <Select.Option value='0'>女</Select.Option>
                </Select>
            </CustomFilter>
            {
                // ... you can use antd all form component or custom component
            }
        </div>
    }
}

const DemoForm = Form.create()(Demo);

ReactDOM.render(<DemoForm/>, document.getElementById('root'));