Hey guys, looking for help on a binding.
Here is an example of a function that returns props spread with new props that I am not sure how to bind to nor do I know how to implement this in rescript.
onChange: handleChangeZIP(props),
onFocus: handleFocusZIP(props),
onKeyDown: handleKeyDownZIP(props),
onKeyPress: handleKeyPressZIP(props)
}),
[handleBlurZIP, handleChangeZIP, handleFocusZIP, handleKeyDownZIP, handleKeyPressZIP]
);
/** ====== END: ZIP STUFF ====== */
/** ====== START: CARD IMAGE STUFF ====== */
const getCardImageProps = React.useCallback(
(props = {}) => {
const images = props.images || {};
return {
'aria-label': cardType ? cardType.displayName : 'Placeholder card',
children: images[cardType ? cardType.type : 'placeholder'] || images.placeholder,
width: '1.5em',
height: '1em',
viewBox: '0 0 24 16',
...props
};
if (!utils.validator.isNumeric(e)) {
e.preventDefault();
}
if (utils.validator.hasCardNumberReachedMaxLength(cardNumber)) {
e.preventDefault();
}
}
};
}, []);
const getCardNumberProps = React.useCallback(
({ refKey, ...props } = {}) => ({
'aria-label': 'Card number',
autoComplete: 'cc-number',
id: 'cardNumber',
name: 'cardNumber',
placeholder: 'Card number',
type: 'tel',
[refKey || 'ref']: cardNumberField,
...props,
onBlur: handleBlurCardNumber(props),
Here is how the functions are used in JS:
<svg {...getCardImageProps({ images })} />
<input {...getCardNumberProps()} />
Thanks in advance!
You were able to get this working earlier, right?
Yup!
I was able to achieve this using the <Spread /> example component from reason-react.
@react.component
let make = (~props, ~children) => React.cloneElement(children, props);
<Spread
props={getExpiryDateProps({
onChange: handleChangeExp,
onBlur: (_ => setExpState(_ => Dormant))->Some,
onFocus: (_ => setExpState(_ => Active))->Some,
})}>
<input value=state.exp />
</Spread>
2 Likes