Les accessoires n'est pas défini Réagir js

Je suis l'aide de réagir 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,
};

Réussi à compiler
./src/components/Parts/SmallBits/FormItems/TextInput.js Ligne 19:
'accessoires' n'est pas définie non-fnud Ligne 20: "les accessoires" n'est pas défini
sans le fnud Ligne 21: 'accessoires' n'est pas définie non-fnud Ligne 22:
'accessoires' n'est pas définie non-fnud Ligne 23: "les accessoires" n'est pas défini
sans le fnud Ligne 24: 'accessoires' n'est pas définie non-fnud

De recherche pour les mots clés pour en savoir plus à propos de chaque erreur.

this.refs.form.clearData();

juste onClick et il me donne

Uncaught TypeError: Cannot read property 'refs', null

mise à jour pour vous
this.props au lieu props

OriginalL'auteur andy wilson | 2017-06-30

  1. 23

    Dans une classe, la façon d'accéder à des 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.

    Que pour cette fonction 

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

    Vous avez 2 questions je crois. Tout d'abord, il n'est pas imbriquée à l'intérieur de la classe afin que les this mot-clé est de ne pas se référant à cette classe. Deuxièmement, même si elle a été imbriquée, une fois que l'appelant appelle cette fonction, le this mot-clé du contexte serait maintenant de ne plus faire référence à votre classe. Il est important de comprendre comment la this mot clé fonctionne et comment l'utiliser bind ou => fonctions de contourner ce problème.

    cela fixe, mais il a brisé ma fonction claire p.s la fonction clear est appelé à partir de la mère où le bouton effacer
    pouvez-vous me montrer votre fonction claire s'il vous plaît?
    J'ai mis à jour ma réponse à l'adresse de votre fonction effacer. Espérons que cela aide.

    OriginalL'auteur Chaim Friedman