如何在 React Query Builder 中添加附加字段？

Question

我试图实现以下目标：当用户输入特定值时，会显示其他字段，用户可以在其中输入值，并且在将查询导出为 json 时也应显示此字段中的值。

我将此自定义编辑器传递给

controlElements={{ valueEditor: CustomValueEditor }}

上的

<QueryBuilder />

，并在指定所需值时添加这些字段。但导出时无法获取X、Y、Z。

const CustomValueEditor = (props: ValueEditorProps) => {
    switch (props.value) {
        case "3d":
            return (
                <div className='demo-space-x'>
                    <ValueEditor {...props} />
                    <input placeholder='X' />
                    <input placeholder='Y' />
                    <input placeholder='Z' />
                </div>
            )
        case "2d":
            return (
                <div className='demo-space-x'>
                    <ValueEditor {...props} />
                    <input placeholder='X' />
                    <input placeholder='Y' />
                </div>
            )

        default:
            return <ValueEditor {...props} />
    }
}

以下是我指定采用值

2d

或

3d

的字段的方法。

{
  name: 'system',
  label: 'system',
  inputType: 'string',
  operators: [equal, notEqual, less, lessOrEqual, greater, greaterOrEqual],
}

我知道在 JQuery JavaScript 版本中有一个

ValueGetter

和

ValueSetter

，这大大简化了这个任务。如何在 React Query Builder 中实现这个结果？

谢谢你。

Answer 1

这里是

react-querybuilder

的维护者。在这种情况下，我通常建议将您想要跟踪的所有值存储在

value

属性本身上。它可以采用数组、对象、逗号分隔字符串的形式，无论哪种形式最适合您的用例。

如果您这样做，您需要确保两件事：

1. 自定义值编辑器组件需要处理复杂的

   value

   属性，因此，例如，如果您的规则对象如下所示...

{
  "field": "system",
  "operator": "=",
  "value": {
    "actualValue": "the actual value",
    "x": "x value",
    "y": "y value",
    "z": "z value"
  }
}

...然后传递到自定义值编辑器的

props.value

将是一个具有

actualValue

、

x

、

y

和

z

属性的对象。您的值编辑器代码应该将它们分解并将属性应用到适当的控件。

2. 更新“值”时需要持久化整个对象。当您从自定义值编辑器调用

   props.handleOnChange

   时，不要仅使用主控件中的

   value

   来调用它，而是使用完整的

   props.value

   对象来调用它，仅更新

   actualValue

   属性（或

   x 

   或

   y

   或其他）。

还有其他方法可以完成此任务，并且这些场景将在版本 7 中变得更容易管理（即将推出......我希望！）。