REST 自定义筛选器的管理员

Question

我正在尝试向列表视图添加自定义过滤器。之前，我已经设法使用 redux-form 的 Field 组件创建自定义输入，并在"编辑"和"创建"视图中使用它。现在，当我尝试在过滤器组件中使用相同的概念时，似乎未定义道具。我不知道为什么。我想创建自定义过滤器的原因是在时间戳上使用 =gte= 和 =lte= 进行过滤。

我想要什么：一个自定义输入，我可以在其中验证并对时间戳进行一些计算，然后使用 =gte= 和 =lte= 进行搜索。

Answer 1

我与您分享一个适合我的组件：

DateBetweenInput.js

 import React, { Component } from 'react'
 import { DateInput } from 'react-admin'
 import { addField } from 'ra-core'
class DateBetweenInput extends Component {
  render () {
    const styles = {
      row: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'flex-start',
        justifyContent: 'space-between'
      }
    }
    const { resource, source } = this.props
    return (
      <span style={styles.row}>
        <DateInput
          source={`${source}.gt`}
          label={`resources.${resource}.fields.${source}_gt`}
        />
        &nbsp;
        <DateInput
          source={`${source}.lt`}
          label={`resources.${resource}.fields.${source}_lt`}
        />
      </span>
    )
  }
}
DateBetweenInput.defaultProps = {
  addLabel: true,
  label: 'createdAt'
}
export default addField(DateBetweenInput)

然后在过滤器上使用：

const PostFilter = (props) => (
  <Filter {...props}>
    <DateBetweenInput source='createdAt' alwaysOn />
  </Filter>
)

此功能现在是 GitHub https://github.com/marmelab/react-admin/issues/817 上的未解决问题