1.0.2 • Published 6 years ago
custom-filter v1.0.2
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'));