web-dev-qa-db-ja.com

小道具が定義されていませんReact js

私はreact jsを使用していますが、なぜpropsが定義されていないのか分かりません。

これが私のクラスです。

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

./src/components/Parts/SmallBits/FormItems/TextInput.jsのコンパイルに失敗しました。行19： 'props'は定義されていませんno-undef行20： 'props'は定義されていません定義されたno-undef行22： 'props'は定義されていませんno-undef行23： 'props'は定義されていませんno-undef行24： 'props'は定義されていませんno-undef

キーワードを検索して、各エラーの詳細を確認してください。

this.refs.form.clearData();

ただそれをクリックして、それは私に与えます

不明なTypeError：nullのプロパティ 'refs'を読み取れません

javascriptreactjsjsx
8
andy wilson

クラスでは、小道具にアクセスする方法はpropsだけでなくthis.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 />
        );
    }
}

この変更によりコードが修正されました。

この機能は

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

あなたには2つの問題があります。まず、クラス内にネストされていないため、thisキーワードはこのクラスを参照していません。第二に、たとえネストされていても、呼び出し元がこの関数を呼び出すと、thisキーワードのコンテキストはクラスを参照しなくなります。 thisキーワードの仕組みと、bindまたは=>関数を使用してこの動作を回避する方法を理解することが重要です。

25
Chaim Friedman