Question

嗨，我有以下反应成分。

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

const propTypes = {
    /*
     * Used to extend default object classes
     */
    classes : PropTypes.object,

    /*
     * Click event handler
     */
    onClick : PropTypes.func,

    /*
     * Delete event handler
     */
    onRequestDelete : PropTypes.func,

    /*
     * This property will contain label text
     */
    label : PropTypes.string
}

class Chip extends React.Component{

    constructor(props){
        super(props);
        this.onClick = this.onClick.bind(this);
    }

    onClick(e) {
        if (this.props.disabled) {
          e.preventDefault();
          return;
        }

        if (this.props.onClick) {
          this.props.onClick(e);
        }
    }

    handleDeleteIconClick(e){
        e.stopPropagation();

        if (this.props.onRequestDelete) {
          this.props.onRequestDelete(event);
        }
    };

    render(){

        let defaultClasses = 'chips chips-rounded';

        const {
            classes,
            onClick,
            label,
            onRequestDelete,
        } = this.props;

        return (

            <div
                className={classNames(classes, defaultClasses)}
                onClick={onClick}
            >
                <span className={classes}>{label}</span>
                {onRequestDelete ? (<div className="deleteIcon" onClick={ this.handleDeleteIconClick } />) : ''}
            </div>

        )
    }

}

Chip.PropTypes = propTypes;

export default Chip

当我运行组件并触发handleDeleteIconClick事件时，我收到以下错误。我在这里做错了什么。

Uncaught TypeError: Cannot read property 'props' of undefined
    at handleDeleteIconClick (1.a0d91201f90f20151e22.hot-update.js:86)
    at HTMLUnknownElement.boundFunc (main.bundle.js:8934)
    at Object.ReactErrorUtils.invokeGuardedCallback (main.bundle.js:8940)
    at executeDispatch (main.bundle.js:8725)
    at Object.executeDispatchesInOrder (main.bundle.js:8748)
    at executeDispatchesAndRelease (main.bundle.js:5786)
    at executeDispatchesAndReleaseTopLevel (main.bundle.js:5797)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (main.bundle.js:13425)
    at Object.processEventQueue (main.bundle.js:5997)

Answer 1

您需要将上下文绑定到构造函数中的handleDeleteIconClick，如

this.handleDeleteIconClick = this.handleDeleteIconClick.bind(this);

或将此handleDeleteIconClick.bind(this)放入您的JSX中，因为你在那个函数中使用了关键字

Answer 2

您始终可以使用handleDeleteIconClick = (e) => {/* function logic */}之类的胖箭头功能。在这种情况下，您不需要在构造函数中绑定函数，this将在函数内可用，范围正确。

在click事件中，this.props未定义

2 个答案: