Class: WithElementMachine

withElementMachine~WithElementMachine(id, onChangeopt, onBluropt, onFocusopt, eventCreatorsopt, defaultValueopt, valueopt, readOnlyopt, disabledopt, send, formStateStore$opt, isConcept$opt, updateStoreopt, elementInteractionTrackingEnabledopt, elementMaintainsOwnActiveStateopt, saveModeopt) → {null|JSX.Element}

new WithElementMachine(id, onChangeopt, onBluropt, onFocusopt, eventCreatorsopt, defaultValueopt, valueopt, readOnlyopt, disabledopt, send, formStateStore$opt, isConcept$opt, updateStoreopt, elementInteractionTrackingEnabledopt, elementMaintainsOwnActiveStateopt, saveModeopt) → {null|JSX.Element}

JSX element containing an element service, used for React rendering.

Parameters:
Name Type Attributes Default Description
id string | number

Id used to identify its values within the store form state. A random postfix is added to address uniqueness in the form name and html element.
onChange function <optional>

Call when an entered value change occurred.
onBlur function <optional>

Call when the user loses focus on the element.
onFocus function <optional>

Call when the user start focussing on the element.
eventCreators object <optional>

Object containing event creators.
defaultValue * <optional>

Optionally a default value for the element.
value * <optional>

A controlled value that must be set within the form machine. Please use the field only if you want to override the current value, information entered by the user is taken care of by this element already.
readOnly boolean <optional>

The readOnly attribute of default HTML form elements.
disabled boolean <optional>
 false

The disabled attribute of default HTML form elements.
send undefined | Object

useRef hook that receives a reference to sending commands to the element service.
formStateStore$ Observer <optional>

Observer containing the store.
isConcept$ Observer <optional>

Observer indicating whether the changes are 'in concept' and therefore should not send as change to the interaction tracking.
updateStore function <optional>

Function to update the store.
elementInteractionTrackingEnabled boolean <optional>
 true
elementMaintainsOwnActiveState boolean <optional>
 false

On true prevent unwanted re-renders in cases where the component keeps a copy of its own value. Prevent re-renders on enteredValue
saveMode "onDebouncedInput" | "none" | "onBlur" | "onBlurAndInactivity" <optional>
 "onDebouncedInput"

Changes the save mode of the element.
Source:
Returns:

Null if the element machine is not yet initialized, otherwise the machined element.

Type
null | JSX.Element