通过的事件处理程序未触发

Question

我有以下课程（为清楚起见，仅保留了必要的细节）：

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