I have the following function called NumberFormatCustom.
NumberFormatCustom :
function NumberFormatCustom(props) {
const { inputRef, onChange, ...other } = props;
return (
<NumberFormat
{...other}
getInputRef={inputRef}
onValueChange={values => {
onChange({
target: {
name: props.name,
value: values.value
}
});
}}
thousandSeparator=","
allowNegative={false}
decimalSeparator="."
decimalScale={2}
maxLength={12}
fixedDecimalScale={true}
allowEmptyFormatting={i}
//prefix="S/"
//mask="_" //nunca los entendí
//format="##.###" //nunca los entendí
// isNumericString
/>
);
}
That I have implemented like,
<TextField
InputProps={{
inputComponent: NumberFormatCustom,
className: classes.finput
}} />
but i want to send another parameter to use inside function, for example in property allowEmptyFormatting, but i don't know how to do it. can someone please help me with this.
this does not work with the current NumberFormatCustom function:
<TextField InputProps={{ inputComponent: NumberFormatCustom(null,'another parameter'),
className: classes.finput }}
You can define a function, which receives a bunch of parameters and returns a component, then you can pass any arguments to the function, like this:
const createNumberFormatCustom = (...params)=> (props) => {
// params will be available in the body of your component
const { inputRef, onChange, ...other } = props;
return (
<NumberFormat
...
/>
);}
and use it like this:
<TextField InputProps={{ inputComponent: createNumberFormatCustom('another parameter'),
className: classes.finput }}
to solve the losing focus problem which you mentioned in the comment, there are some solutions:
1- if you want to pass some additional params just one time you can call createNumberFormatCustom outside of your component and pass the returned component as inputComponent, like this:
const MyComp = createNumberFormatCustom('custom params'); // don't call it inside the body of component, because whenever component rerenders, it makes a new component
<TextField
...
InputProps={{
inputComponent: MyComp,
}}
/>
You can learn more about this trick Here: Higher-Order Components
2- if you want to read some values inside the component and pass it to createNumberFormatCustom but again for the just first render you can use React.useMemo or React.useRef, like this:
const MyComp = React.useMemo(()=> createNumberFormatCustom('customparams'), []);
<TextField
...
InputProps={{
inputComponent: MyComp,
}}
/>
or:
const MyComp = React.useRef(createNumberFormatCustom('custom params'))
<TextField
InputProps={{
inputComponent: MyComp.current,
}}
/>
3- if you want to dynamically send some parameters to NumberFormatCustom,the better solution is to use materialUI approach to send attributes to inputComponent, like this:
<TextField
InputProps={{
inputComponent: NumberFormatCustom,
inputProps: { param1: 'value1', param2:'value2' }
}}
/>
and inside NumberFormatCustom read custom params like this:
function NumberFormatCustom(props) {
const { param1, param2, ...other } = props;
console.log({param1, param2})
return (
<NumberFormat .../>
);
}