javascript - 传递的事件处理程序未触发

Question

我有以下类(class)(为了清楚起见，只留下了必要的详细信息):

class CalendarAndUsage extends React.
    constructor(props) {
        super(props);

        this.handleClickOnDay = this.handleClickOnDay.bind(this);

    }

    handleClickOnDay() {
        console.log("wtf");
    }

    render() (
             return (<Calendar onDayClick={this.handleClickOnDay} />
        )
    }
}

Calendar 类如下所示:

class Calendar extends React.Component {
    render() {

        let weeks = this.props.weeks.map((week) => {
                return (
                    <Week onDayClick={this.props.onDayClick} />
                )
            }
        );

        return (
            <div className="calendar">
                {weeks}
            </div>
        )
    }
}

最后是 Week 类代码:

class Week extends React.Component {
    render() {
       /* lots of uninteresting code */
       return <OffMonthDay onClick={() => this.props.onDayClick()}>{`${dayOfTheWeek} ${date.day}`}</OffMonthDay>
    }

但是天知道什么原因，每当单击 OffMonthDay 元素时，onClick 事件都不会触发。我做错了什么吗？

编辑:

OffMonthDay 非常简单:

function OffMonthDay(props) {
    return (
        <div className="col-md-1 off-month-day day">
            {props.children}
        </div>
    )
}

Answer 1

它不起作用，因为 OffMonthDay 没有 onClick 事件。

它应该看起来像这样

function OffMonthDay(props) {
    return (
        <div 
           onClick={props.onClick}
           className="col-md-1 off-month-day day"
        >
            {props.children}
        </div>
    )
}