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

Passed event handler not firing

本文关键字：程序 事件处理      更新时间：2023-09-26

我有以下类(为了清晰起见，只留下必要的细节):

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

不工作，因为OffMonthDay没有onClick事件

应该是这样的

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