react-uniformed › "useSettersAsEventHandler"

Module: "useSettersAsEventHandler"

Index

Interfaces

• ReactOrNativeEventListener

Functions

• useSettersAsEventHandler

Functions

useSettersAsEventHandler

▸ useSettersAsEventHandler(...handlers: eventLikeHandlers[]): ReactOrNativeEventListener

Converts a list of setters to a single event handler. Setters are functions that takes a specified name as the first parameter and a specified value as the second param. Note that this hook is built on top of useHandlers.

example Create an onChange event handler

// set values and touches on change
const handleChange = useSettersAsEventHandler(setValue, touchField);

// set values and touches on change as well as validate
const handleChange = useSettersAsEventHandler(setValue, touchField, validateByName);

<input name='username' value={values.username} onChange={handleChange} />;

example Creating an onBlur event handler

// set values and touches on change
const handleChange = useSettersAsEventHandler(setValue, touchField);

// validation may be expensive so validate on blur.
const handleBlur = useSettersAsEventHandler(validateByName);

<input name='username' value={values.username} onChange={handleChange} onBlur={handleBlur} />;

Parameters:

Name	Type	Description
...handlers	eventLikeHandlers[]	A list of setters that will be used in an event handler

Returns: ReactOrNativeEventListener

An event handler that can be used in events like onChange or onBlur. In order for this hook to call each setter with a name and value param, the inputs that this is used on must have a name attribute that maps to the specified.