useValueEditor()
useValueEditor<
F,O>(props:ValueEditorProps<F,O>): {inputTypeCoerced:InputType;multiValueHandler: (val:any,idx:number) =>void;parseNumberMethod:ParseNumberMethod;valueAsArray:any[];valueListItemClassName:string; }
This hook is primarily concerned with multi-value editors like date range pickers, editors for 'in' and 'between' operators, etc.
Type Parameters
| Type Parameter | Default type |
|---|---|
F extends FullField<string, string, string, Option<string>, Option<string>> | FullField<string, string, string, Option<string>, Option<string>> |
O extends string | string |
Parameters
| Parameter | Type |
|---|---|
props | ValueEditorProps<F, O> |
Returns
{ inputTypeCoerced: InputType; multiValueHandler: (val: any, idx: number) => void; parseNumberMethod: ParseNumberMethod; valueAsArray: any[]; valueListItemClassName: string; }
The value as an array (valueAsArray), a change handler for
series of editors (multiValueHandler), a processed version of the
parseNumbers prop (parseNumberMethod), and the classname(s) to be applied
to each editor in editor series (valueListItemClassName).
NOTE: The following logic only applies if skipHook is not true. To avoid
automatically updating the value, pass { skipHook: true }.
If the value is an array of non-zero length, the operator is not one of
the known multi-value operators ("between", "notBetween", "in", "notIn"), and
the type is not "multiselect", then the value will be set to the first
element of the array (i.e., value[0]).
The same thing will happen if inputType is "number" and value is a string
containing a comma, since <input type="number"> doesn't handle commas.
inputTypeCoerced
inputTypeCoerced:
InputType
Coerced inputType based on inputType and operator.
multiValueHandler()
multiValueHandler: (
val:any,idx:number) =>void
An update handler for a series of value editors, e.g. when operator is "between". Calling this function will update a single element of the value array and leave the rest of the array as is.
Parameters
| Parameter | Type | Description |
|---|---|---|
val | any | The new value for the editor |
idx | number | The index of the editor (and the array element to update) |
Returns
void
parseNumberMethod
parseNumberMethod:
ParseNumberMethod
Evaluated parseNumber method based on parseNumbers prop. This property ends up
being the same as the parseNumbers prop minus the "-limited" suffix, unless
the "-limited" suffix is present and the inputType is not "number", in which case
it's set to false.
valueAsArray
valueAsArray:
any[]
Array of values for when the main value represents a list, e.g. when operator is "between" or "in".
valueListItemClassName
valueListItemClassName:
string
Class for items in a value editor series (e.g. "between" value editors).
Examples
// Consider the following rule:
`{ field: "f1", operator: "in", value: ["twelve","fourteen"] }`
// If `operator` changes to "=", the value will be reset to "twelve".
// Consider the following rule:
`{ field: "f1", operator: "between", value: "12,14" }`
// If `operator` changes to "=", the value will be reset to "12".
Defined in
packages/react-querybuilder/src/components/ValueEditor.tsx:207
API documentation is generated from the latest commit on the main branch. It may be somewhat inconsistent with official releases of React Query Builder.