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

最后是周课程代码：

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

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

1 个答案: