Material UI のTextFieldのInputPropsの使い方

InputPropsの用途

TextFieldのプロパティ。
3rdパーティ製ライブラリなどを用いて、入力フォーマットをカスタマイズすることなどができる。
細かい制御も可能になる。

InputPropsは、inputPropsとinputComponentを持つ。
InputPropsは、inputPropsを内包している。

inputComponent

TextFieldの処理コンポーネントを指定する。

inputProps

inputComponentで指定したコンポーネントに渡すpropsオブジェクト。
自作コンポーネントのPropsとHtmlInputElementやHTMLTextAreaElementのPropsが許容される。

実装例

sample.jsx

const sample = ()=>{
    const [value, setValue] = useState("")

    return <TextField
            className={classes.text}
            InputProps={{
                inputProps: {
                    value: val,
                    onChange: (e:React.ChangeEvent<HTMLInputElement>) => setVal(e.target.value),
                    type: "text",
                    test: () => {}
                } as OriginalBaseInputProps, // 自作コンポーネントPropsとHtmlInputElementやHTMLTextAreaElementのProps
                inputComponent: OriginalBaseInput // 自作コンポーネント
            }}
        />
}

OriginalBaseInput.jsx

export interface OriginalBaseInputProps {
    test: () => void
}

export const OriginalBaseInput = (props: PropsWithChildren<InputBaseComponentProps>) => {
    function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
        // 1桁目を常に選択
        ref.current?.setSelectionRange(0, 1)
    }

    const ref = createRef<HTMLInputElement>()
    return <input {...props} onKeyDown={onKeyDown} ref={ref}/>
}

inputComponentに渡ってくるpropsには、inputRefが入っている。
OriginalBaseInputの{...props}で自作コンポーネントのPropsとHtmlInputElementやHTMLTextAreaElementのPropsが展開している。