问题描述

原型如下图所示，需要在查询按钮左边添加一个自定义的高级筛选按钮

解决方法

在searchProps中提供了一个submitterRender的api，可以用来渲染自定义操作区。searchProps的配置如下

searchProps={{

initialValues: {

begin_date: [moment().startOf('month'), moment().endOf('month')],

},

submitterRender: (_, dom) => {

const [reset, search] = dom;

const customButton = React.createElement(

'div',

{

style: { display: 'flex', alignItems: 'center', cursor: 'pointer' },

onClick: () => {

setFilterVisible(true);

},

},

React.createElement('img', {

src: Add,

alt: '图标',

style: {

marginRight: '8px',

},

}),

React.createElement(

'span',

{

style: {

fontFamily: 'PingFang SC',

fontSize: '14px',

fontWeight: 400,

lineHeight: '22px',

textAlign: 'left',

color: '#1890FF',

},

},

'筛 选'

)

);

return [customButton, search, reset];

},

resetButton: true,

onReset: handleReset,

}}

创建customButton的代码也可以不使用React.createElement，如果直接使用函数返回JSX会产生下面的报错

不能将类型“() => React.JSX.Element”分配给类型“ReactElement<any, string | JSXElementConstructor<any>>”

需要直接返回一个元素。

return [<CustomButton key="customButton" />, search, reset];