Reactjs react文本掩码如何使用材质ui表单在函数react中传递模式

这是我的课

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>
    );
  }

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

类似这样的

函数CreditCardMask（props，pattern）

其中pattern是我希望输入像这样被屏蔽的正则表达式模式

---

我使用的材质ui版本是“材质ui”：“^1.0.0-beta.12”，

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

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

函数CreditCardMaskWrapper（模式）{
返回（道具）=>{
返回(
)
};
}

然后你可以：

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

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

const模式=[/\d/，/\d/，/\d/，/\d/]；

---

祝你好运

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

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

函数CreditCardMaskWrapper（模式）{
返回（道具）=>{
返回(
)
};
}

然后你可以：

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

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

const模式=[/\d/，/\d/，/\d/，/\d/]；

---

祝你好运

尝试您的解决方案后，如果一次呈现多个控件，它将禁用控件，并且不允许编辑（例如使用不同模式的多个掩码控件初始化表单）。请提供帮助。尝试了您的解决方案，如果一次呈现多个控件，它将禁用控件，并且不允许编辑（例如使用具有不同模式的多个掩码控件初始化表单）。请帮忙。