web-dev-qa-db-fra.com

Les accessoires ne sont pas définis React js

J'utilise react js et je ne sais pas pourquoi je reçois des accessoires n'est pas défini.

Voici ma classe.

import React, { Component } from 'react';

const InputHeight = {
    height: '50px',
}

function clearData() {
    this.refs.input.value = "";
}



export default class TextInput extends Component {
    render() {
        return (
            <input
                className="form-control"
                ref="input"
                name={props.name}
                type={props.inputType}
                value={props.content}
                pattern={props.pattern}
                onChange={props.controlFunc}
                placeholder={props.placeholder}
                style={InputHeight}
                required />
        );
    }
}


TextInput.propTypes = {
    inputType: React.PropTypes.oneOf(['text', 'number', 'email']).isRequired,
    name: React.PropTypes.string.isRequired,
    controlFunc: React.PropTypes.func.isRequired,
    content: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number,
    ]).isRequired,
    placeholder: React.PropTypes.string,
};

Impossible de compiler ./src/components/Parts/SmallBits/FormItems/TextInput.js Ligne 19: 'props' n'est pas défini no-undef Ligne 20: 'props' n'est pas défini no-undef Ligne 21: 'props' n'est pas no-undef défini Ligne 22: "props" n'est pas défini no-undef Ligne 23: "props" n'est pas défini no-undef Line 24: "props" n'est pas défini no-undef

Recherchez les mots clés pour en savoir plus sur chaque erreur.

this.refs.form.clearData();

cliquez dessus et ça me donne

TypeError non capturé: impossible de lire la propriété 'refs' de null

javascriptreactjsjsx
8
andy wilson

Dans une classe, la façon d'accéder aux accessoires est this.props pas seulement props.

export default class TextInput extends Component {
    render() {
        return (
            <input
                className="form-control"
                ref="input"
                name={this.props.name}
                type={this.props.inputType}
                value={this.props.content}
                pattern={this.props.pattern}
                onChange={this.props.controlFunc}
                placeholder={this.props.placeholder}
                style={InputHeight}
                required />
        );
    }
}

Voici votre code révisé avec ce changement.

Quant à cette fonction

function clearData() {
    this.refs.input.value = "";
}

Je crois que vous avez 2 problèmes. Tout d'abord, il n'est pas imbriqué dans la classe, donc le mot clé this ne fait pas référence à cette classe. Deuxièmement, même s'il était imbriqué, une fois que l'appelant appelle cette fonction, le contexte du mot clé this ne ferait plus référence à votre classe. Il est important de comprendre comment fonctionne le mot clé this et comment utiliser bind ou => fonctions pour contourner ce comportement.

25
Chaim Friedman