markdown 反应数格式器

Posted 2021-05-05

### Custom input problem
Problem: when using custom input component, I can't pass other custom props with it
```
import TextField from '@material-ui/core/TextField';
...
<NumberFormat format="###-####-####" mask="_"
customInput={TextField}
  label: "전화번호" />
```
this throws error. which is different behavior from official [doc](https://github.com/s-yadav/react-number-format#custom-inputs)  

Workaround: [ref](https://github.com/s-yadav/react-number-format/issues/295#issuecomment-476398044)
```
import React from 'react';
import { default as NumberFormat } from 'react-number-format';
import TextField from '@material-ui/core/TextField';

//@ts-ignore
const CustomInput = ({ customInputProps, ...inputProps }) => {
  return (
    <TextField {...customInputProps} {...inputProps} />
  )
}

class FormattedInputs extends React.Component<{}> {
  render() {
    return (
      //@ts-ignore
      <NumberFormat format="###-####-####" mask="_"
        customInput={CustomInput}
        customInputProps={{
          label: "전화번호"
        }} />
    );
  }
}

export default FormattedInputs
```

### basic: with material-ui
```tsx
class FormattedInputs extends React.Component<Props> {
  state = { value: '' }

  static getDerivedStateFromProps(nextProps: Props) {
    return {
      value: nextProps.value,
    }
  }

  render() {
    return (
      //@ts-ignore
      <NumberFormat format="###-####-####" mask="_"
        value={this.state.value}
        customInput={CustomInput}
        customInputProps={{
          label: "전화번호",
          variant: textFieldVariant,
          margin: textFieldMargin
        }}
        onValueChange={(values) => {
          const { formattedValue, value } = values;
          this.setState({ value })
        }}
      />
    );
  }
}

export default FormattedInputs
```