React onClick 事件仅在渲染组件时触发

Question

动态呈现组件的 onClick 函数应该通过 useState 设置选定日期。 imgs 上的 onClicks 完全按照您的预期工作，没有任何问题。

即使只在其位置放置一个带有 onClick 属性的 div 也不起作用，当组件呈现时 onClick 仍然会被触发，每个 onClick 两次。通过箭头按钮设置月份会重新呈现再次触发 onClick 的组件，所以我对此非常确定。

代码如下：

const Calendar = () => {

const now = Temporal.Now.plainDateISO()

const [date, setDate] = useState(now)
const [calendarDays, setCalendarDays] = useState([now])

const incrementMonth = () => {
    setDate(previous => previous.add({months: 1}))
}


const decrementMonth = () => {
    setDate(previous => previous.subtract({months: 1}))
}


useEffect(() => {
    
    let arr = []
    for(let i = 1 ; i < date.daysInMonth + 1 ; i +=1){
        arr.push(now.with({day: i}))
    }
    console.log(arr)
    setCalendarDays(arr)        
},[date.month])
    


return(
    <StyledCalendarBox>
    <StyledCalendarBoxHeader>
        <StyledMonthName>{date.toString()}</StyledMonthName>
        <StyledArrowWrapper>
        <img src={arrow} alt='up' onClick={decrementMonth} />
        <img className='down' src={arrow} alt='down' onClick={incrementMonth} />
        </StyledArrowWrapper>
    </StyledCalendarBoxHeader>
    <StyledCalendarBoxBody>
    {calendarDays.map(calendarDay => <StyledDay onClick={setDate(calendarDay)} key={calendarDay.toString()}><span>{calendarDay.day.toString()}</span></StyledDay>)}
    
        
    </StyledCalendarBoxBody>
    </StyledCalendarBox>
)

}

导出默认日历

Answer 1

发生这种情况是因为您只传递对 onClick 函数的引用，因此它只会运行当组件被渲染时或 re-rendered.

您必须将其添加为函数。

onClick={() => setDate(calendarDay)}

Answer 2

您必须添加 () => setDate(calendarDay) 否则它会在渲染组件时自动调用该函数。

<StyledCalendarBoxBody>
{calendarDays.map(calendarDay => <StyledDay onClick={() => setDate(calendarDay)} key={calendarDay.toString()}><span>{calendarDay.day.toString()}</span></StyledDay>)}

    
</StyledCalendarBoxBody>

Answer 3

当您使用onClick 事件并想将参数传递给处理程序方法时，您必须使用函数bind。因此，仅当您单击列表项时才会触发处理程序。

onClick={this.handleClick.bind(this, list)}

React onClick 事件仅在渲染组件时触发

React onClick event only triggers when rendering component

calendar

reactjs

react-hooks