this.props 在点击事件中未定义答案

【问题标题】：this.props is undefined inside click eventthis.props 在点击事件中未定义
【发布时间】：2018-05-09 12:00:53
【问题描述】：

您好，我有以下反应组件。

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)

【问题讨论】：

你在绑定handleDeleteIconClick 吗？
是的，我将它绑定到 return 语句中的 deleteIcon 元素。
在你绑定的构造函数中 this.onClick = this.onClick.bind(this); 在代码中的任何地方都看不到 habdleDeleteonClick
当我添加绑定代码时，它会抛出一个ReferenceError 说handleDeleteIconClick 没有定义。
我假设您将其绑定在构造函数中，例如 this.handleDeleteonClick = this.handleDeleteonClick.bind(this);

标签： javascript reactjs components

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

或者把这个handleDeleteIconClick.bind(this)放到你的JSX中，因为你在那个函数中使用了关键字 this

【讨论】：

当我使用你的代码时，我得到了错误ReferenceError: handleDeleteIconClick is not defined
this.handleDeleteIconClick = this.handleDeleteIconClick.bind(this);对不起