réagir texte-masque comment passer modèle en fonction réagissez en utilisant le formulaire

Question

Ceci est ma classe

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

}

Je suis un matériau ui utilise une bibliothèque appelée react-text-mask Ce qui en fait la masque comme celui-ci selon à sa docs

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

maintenant ce que je veux faire est de faire une telle fonction pour Masking qui accepte modèle dans sa fonction param, que je peux créer une fonction de masquage commune wh Je prends le motif et masque le champ d'entrée en fonction des paramètres de masquage qu'il obtient;

Quelque chose comme ça function CreditCardMask (props, pattern) où le motif est le motif regex Je veux que l'entrée soit masquée.

La version ui matériel que je me sers est "matériau ui": "^-beta.12 1.0.0",

Answer 1

Je suggère que vous pouvez utiliser la fonction haute pour envelopper votre composant:

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

Et vous pouvez:

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

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

Bonne chance!