React Admin,基于第一个值的第二个输入过滤器

皮埃尔·伯蒂尔

这是我第一次来,所以我希望我会清楚!

我正在为项目使用React-admin,但遇到了一个奇怪的问题。我使用的是模态,其中有两个字段,一个用于选择仓库(用于我的项目),第二个用于根据所选仓库解析位置。问题在于,一旦选择了仓库,当我选择一个位置时,将调用第二个查询而没有过滤器(但是在选择仓库之后,就会有一个很好的查询)。

示例:我选择“ WHBOB”,查询正在过滤WHBOB,当我单击该位置时,第二个查询没有过滤器就通过了。我认为,我正在使用的状态是重置过滤器,但我不知道如何解决...

代码:

import React, { useState } from 'react'

import { AutocompleteInput, ReferenceInput, SelectInput } from 'react-admin'
import { Box, Typography } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import ProductReceptionInputs from 'components/ProductReceptionInputs'

const useSmallBodyStyles = makeStyles(theme => ({
  root: {
    fontWeight: '600',
    color: theme.palette.secondary.contrastText
  }
})
)

const ProductLogisticInputs = (props) => {
  const classes = useSmallBodyStyles()

  const [selectedOption, setSelectedOption] = useState()

  function handleChange (evt) {
    setSelectedOption(evt.target.value)
  }

  return (
    <>
      <Typography variant='body2' color='secondary.contrastText' className={classes.root}>Atelier</Typography>

      <Box display='flex' width='100%'>
        <Box width='320px'>
          <SelectInput
            label='Atelier' source='warehouse'
            choices={[
              { id: 'WHBOB', name: 'Bobigny' },
              { id: 'WHLIL', name: 'Lille' },
              { id: 'WHLYO', name: 'Lyon' }
            ]} alwaysOn emptyText='Atelier' fullWidth
            InputProps={{ disableUnderline: true }}
            onChange={handleChange}
          />
        </Box>

        <Box width='320px' marginLeft='24px'>

          <ReferenceInput
            label='Emplacement'
            reference='location'
            source='location'
            filter={{ ancestor_path: selectedOption }}
            alwaysOn
          >
            <AutocompleteInput
              optionValue='id'
              optionText='name'
              options={{ disabled: !selectedOption }}
              fullWidth
            />
          </ReferenceInput>
        </Box>
      </Box>
      <Typography variant='body2' color='secondary.contrastText' className={classes.root}>Reception</Typography>
      <ProductReceptionInputs />
    </>
  )
}

export default ProductLogisticInputs

如果您需要更多信息,请随时询问!

希望我很清楚:)

米格尔·阿拉亚(Miguel Araya)

对于这种情况(链接2个选项),您应该使用FormDataConsumer这是文档:https : //marmelab.com/react-admin/Inputs.html#linking-two-inputs

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在第二个API中使用第一个API的信息-React

基于第一个参数类型的TypeScript第二个参数类型

Javascript:获取第一个和第二个斜杠的值

React,2 setstate在相同的功能中:第二个擦除第一个

WIX React Native Navigation:堆栈中的第二个屏幕显示在第一个屏幕上方

从每行中减去第一个或第二个值

根据第二个值返回数组的第一个值

如何使第二个下拉列表基于第一个下拉值自动选择值

如何基于第一个查询运行第二个查询?

如果第一个输入聚焦,则将第二个输入

一个屏幕上带有过滤器的多个React Admin列表

React-Native Redux在第一个reducer中起作用,但在第二个中不起作用

React:在第一个功能组件被更新时呈现第二个功能组件

合并两个数组,第一个基于值,第二个基于键-php

MySQL SELECT全部来自第一个表,并使用第二个表过滤器的特定where子句连接来自第二个表的匹配数据

在第二个查询的值中使用第一个查询的值

根据第二个值找到内部数组的第一个值

执行2个mysql查询,第二个基于第一个

基于Typescript的React组件的通用参数中的第二个参数代表什么?

根据React.Js中第一个下拉列表的选择填充第二个下拉列表

使用React,点击第一个输入显示第二个输入,如何自动聚焦到第二个输入?

执行第二个函数,基于第一个函数的结果

嵌套 for 循环,第二个 for 循环基于第一个的长度

第一个下拉选择不过滤第二个下拉

Codeigniter 基于第一个 DB 连接到第二个 DB

Android Spinner:根据第一个微调器过滤器填充第二个和第三个微调器

查找第一个值并返回列表中的第二个值

如果没有第二个连接到第一个连接,如何将第一个连接的过滤器列表中的值添加到第一个连接的结果,添加行值?

我使用 react Js,我有一个对象列表,第一个对象有一个与第二个对象相同的数组元素