Tengo la siguiente función llamada NumberFormatCustom.
NúmeroFormatoPersonalizado:
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 /> ); }Que he implementado como,
<TextField InputProps={{ inputComponent: NumberFormatCustom, className: classes.finput }} />pero quiero enviar otro parámetro para usar dentro de la función, por ejemplo, en la propiedad allowEmptyFormatting , pero no sé cómo hacerlo. ¿Puede alguien por favor ayudarme con esto?
esto no funciona con la función NumberFormatCustom actual:
<TextField InputProps={{ inputComponent: NumberFormatCustom(null,'another parameter'), className: classes.finput }}Puede definir una función, que recibe un montón de parámetros y devuelve un componente, luego puede pasar cualquier argumento a la función, así:
const createNumberFormatCustom = (...params)=> (props) => { // params will be available in the body of your component const { inputRef, onChange, ...other } = props; return ( <NumberFormat ... /> );}y usarlo así:
<TextField InputProps={{ inputComponent: createNumberFormatCustom('another parameter'), className: classes.finput }}para resolver el problema de pérdida de enfoque que mencionaste en el comentario, hay algunas soluciones:
1- si desea pasar algunos parámetros adicionales solo una vez, puede llamar a createNumberFormatCustom fuera de su componente y pasar el componente devuelto como inputComponent , así:
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, }} />Puedes aprender más sobre este truco aquí: Componentes de orden superior
2- si desea leer algunos valores dentro del componente y pasarlo a createNumberFormatCustom pero nuevamente para el primer renderizado puede usar React.useMemo o React.useRef , así:
const MyComp = React.useMemo(()=> createNumberFormatCustom('customparams'), []); <TextField ... InputProps={{ inputComponent: MyComp, }} />o:
const MyComp = React.useRef(createNumberFormatCustom('custom params')) <TextField InputProps={{ inputComponent: MyComp.current, }} /> 3- si desea enviar dinámicamente algunos parámetros a NumberFormatCustom , la mejor solución es usar el enfoque materialUI para enviar atributos a inputComponent , como este:
<TextField InputProps={{ inputComponent: NumberFormatCustom, inputProps: { param1: 'value1', param2:'value2' } }} /> y dentro NumberFormatCustom lea parámetros personalizados como este:
function NumberFormatCustom(props) { const { param1, param2, ...other } = props; console.log({param1, param2}) return ( <NumberFormat .../> ); }