javascript - 在函数中反应未定义的 this

Question

有人可以向我解释为什么 renderInput 函数中的这个值是未定义的。我浏览了代码，一切看起来都很好。

这是错误

Uncaught TypeError: Cannot read property 'renderError' of undefined

这是我的组件 AddCatalog。当它在 renderInput 中调用 console.log(this) 时，这返回我未定义

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);

标签： javascriptreactjsreact-redux

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