2017-10-20 14 views
0

J'ai un problème sur mon site de réaction. J'ai une classe que j'exporterréagir mettre des accessoires après la classe d'importation

class Input extends React.Component { 
    render() { 
    const CustomMapping = [ 
     ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'], 
     ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', '@'], 
     ['z', 'x', 'c', 'v', 'b', 'n', 'm', '.com'] 
    ]; 

    return (
     <KeyboardedInput 
     enabled 
     type={this.props.type} 
     value={this.props.value} 
     name={this.props.name} 
     defaultKeyboard={CustomMapping} 
     /> 
    ); 
    } 
} 
export default Input; 

et je l'importer dans un autre fichier et je ne sais pas comment je peux ajouter quelques accessoires pour le compléter.

aidez-moi s'il vous plaît! :) un bon jour ou de la nuit;)

Répondre

0

Si je comprends bien votre question , vous voulez ajouter des accessoires supplémentaires à votre entrée? Ou vous voulez juste passer les accessoires attendus?

class Input extends React.Component { 
    render() { 
    const CustomMapping = [ 
     ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'], 
     ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', '@'], 
     ['z', 'x', 'c', 'v', 'b', 'n', 'm', '.com'] 
    ]; 

    const { type, value, name, ...extraProps } = this.props; 

    return (
     <KeyboardedInput 
     enabled 
     type={type} 
     value={value} 
     name={.$name} 
     defaultKeyboard={CustomMapping} 
     {...extraProps} 
     /> 
    ); 
    } 
} 
export default Input; 

Dans les composants où vous importez l'entrée, il suffit de les ajouter des accessoires réguliers:

class Whatever extends React.Component { 
    render() { 

    return (
     <Input 
     type={'input'} 
     value={'abc'} 
     name={'email'} 
     color={'green'} 
     /> 
    ); 
    } 
} 
export default Whatever; 
+0

merci de l'aide, je comprends comment ajouter des accessoires supplémentaires. – victorfau

0

Dans l'autre fichier appeler comme

<Input type="input" value="abc" name="email" /> 

, ajoutez également un constructeur de fichier d'entrée

constructor(props) { 
    super(props); 
}