react-text-mask 如何在函数中传递模式 react 使用 material-ui 形式

Question

这是我的class

class PaypalAddPaymentForm extends Component {

  constructor (props) {
    super(props);
    this.state = {
     form: {
      cardNo: '',
     }
    }
  }

  onChange = (e, v) => {
    let field = e.target.name;
    let form = this.state.form;
    form[field] = e.target.value;
    this.setState({ form });
  }

  render () {
   return (
      <PaypalForm className="margin-top margin-horizontal">
        <FormGroup>
         <FormLabel>Card</FormLabel>
         <Input
          name="cardNo"
          inputComponent={CreditCardMask}
          onChange={this.onChange}
          inputProps={{ 'aria-label': 'card no' }}
          disableUnderline
         />
        </FormGroup>
      </PaypalForm>
    );
  }

}

我正在使用一个名为 react-text-mask 的库，根据它的文档，它基本上像这样屏蔽了它

function CreditCardMask (props) {
  return (
    <MaskedInput
      {...props}
       mask={[ /\d/, /\d/, /\d/, /\d/ ]}
       placeholderChar={'\u2000'}
       showMask={false}
     />
   );
}

现在我想做的是为 Masking 创建一个在其函数参数中接受模式的函数，这样我就可以创建一个通用的屏蔽函数，该函数接受模式并根据屏蔽参数屏蔽输入字段它得到；

类似这样的东西 function CreditCardMask (props, pattern) 其中 pattern 是正则表达式模式我希望输入像这样被屏蔽。

我使用的material ui版本是"material-ui": "^1.0.0-beta.12",

Answer 1

我建议你可以使用高阶函数来包装你的组件：

function CreditCardMaskWrapper(pattern) {
  return (props) => {
    return (
      <MaskedInput
        {...props}
        mask={pattern}
        placeholderChar={'\u2000'}
        showMask={false}
      />
    )
  };
}

然后你可以：

     const pattern = [ /\d/, /\d/, /\d/, /\d/ ];

     <Input
        name="cardNo"
        inputComponent={CreditCardMaskWrapper(pattern)}
        onChange={this.onChange}
        inputProps={{ 'aria-label': 'card no' }}
        disableUnderline
     />

祝你好运！

react-text-mask 如何在函数中传递模式 react 使用 material-ui 形式

react-text-mask how to pass pattern in function react using material-ui form

masking

reactjs

material-design