Реагировать неопределенным это в функции

Question

кто-то может объяснить мне, почему это значение в функции renderInput не определено.Я просматриваю код и все выглядит хорошо.

Вот ошибка

Uncaught TypeError: Cannot read property 'renderError' of undefined

Это мой компонент AddCatalog.Когда он вызывает console.log (this) в renderInput, он возвращает меня без определения

import React, {PropTypes} from "react";
    import {Field, reduxForm} from "redux-form";
    //
    class AddCatalog extends React.Component {
        constructor(props) {
            super(props);
            this.renderError = this.renderError.bind(this);
        }
        renderError({error, touched}) {
            alert("asds");
            if (touched && error) {
                return <div className="red">{error}</div>;
            }
        }
        renderInput({input, label, meta}) {
            return (
                <div className="form-group">
                    <label>{label}</label>
                    <input {...input} className="form-control" autoComplete="off" />
                    {this.renderError}
                </div>
            );
        }
        onSubmit(formValues) {
            console.log(formValues);
        }
        render() {
            return (
                <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
                    <div className="row paddingLR30 container-fluid">
                        <div className="col-12">
                            <h2>Dane placówki</h2>
                        </div>
                        <div className="col-3">
                            <Field label="Nazwa placówki*" name="name_kindergarten" component={this.renderInput} />
                        </div>
                    </div>
                    <button>Submit</button>
                </form>
            );
        }
    }

    const validate = (formValues) => {
        const errors = {};
        if (!formValues.name_kindergarten) {
            errors.name_kindergarten = "Musisz podać nazwę przedszkola";
        }
        return errors;
    };

    export default reduxForm({
        form: "simple",
        validate
    })(AddCatalog);

Answer 1

Вместо того, чтобы вызывать эту функцию, например this.renderError(), вы дали указатель, подобный this.renderError.

, присутствующий код:

 renderInput({input, label, meta}) {
        return (
            <div className="form-group">
                <label>{label}</label>
                <input {...input} className="form-control" autoComplete="off" />
                {this.renderError}
            </div>
        );
    }

правильный код:

 renderInput({input, label, meta}) {
        return (
            <div className="form-group">
                <label>{label}</label>
                <input {...input} className="form-control" autoComplete="off" />
                {this.renderError()}
            </div>
        );
    }

Answer 2

Поскольку renderInput не вызывается в контексте компонента - вы забыли связать его с this в конструкторе, как вы это сделали с renderError.