使用 React.forwardRef 时将 prop 传递给组件

Question

How to pass maskValue into TextMaskCustom and update mask prop .

Basically I need to mask value to be dynamic

import { IMaskInput } from 'react-imask';
import { OutlinedInput } from '@material-ui/core';

const TextMaskCustom = React.forwardRef((props, ref) => {
    const { onChange, ...other } = props;

    console.log(props);

    return (
        <IMaskInput
            {...other}
            mask="0[00].0[00].0[00].0[00]"
            inputRef={ref}
            onAccept={(value) => onChange({ target: { name: props.name, value } })}
        />
    );
});


<OutlinedInput
   maskvalue="0[00].0[00].0[00].0[00]"
   value={value}
   onChange={onChange}
   inputComponent={TextMaskCustom}
/>

Output of props

Answer 1

According to https://mui.com/api/outlined-input/ you need to pass it into a specific prop called inputProps