onClick 事件在单击 Microsoft React 结构的 DatePicker 图标时不起作用

Question

我试图显示 DatePicker 的错误消息 onClick 事件。 但是当我们点击 datepicker 输入框时它正在工作。 但是当我们点击日期选择器图标时，onClick 事件不起作用。 任何人都可以建议任何事件以在单击图标时显示警告消息。

我正在使用以下组件：

import { DatePicker } from 'office-ui-fabric-react';

<div className="date-range">
                <DatePicker
                    label={text.label}
                    placeholder={text.placeholder}
                    id={text.id}
                    showMonthPickerAsOverlay
                    strings={DayPickerStrings}
                    onSelectDate={date => onDateRangeChange(date, text.id)}
                    onClick={event => onDateChangeClick(event)}
                    isMonthPickerVisible={false}
                    formatDate={date => onFormatDate(date, pattern)}
                    minDate={minDate}
                    maxDate={maxDate}
                    value={value[text.id]}
                />
                {showEndDateWarning ? (
                    <p className="warningClass">{text.warningMsg}</p>
                ) : null}
            </div>

Answer 1

您可以在“onSelectDate”事件中将“showEndDateWarning”的 state 值更改为 true。

Answer 2

我刚刚遇到了同样的问题并通过使用 onClickCapture= 解决了它

import * as React from 'react';
import {
    DatePicker,
    IDatePickerStrings,
    defaultDatePickerStrings,
    IDatePickerStyles
} from '@fluentui/react';
import { useConst } from '@fluentui/react-hooks';
import { AcknowledgementReIssueResponse } from '../models/dtos';

// START COMPONENT
const datePickerStyles: Partial<IDatePickerStyles> = { root: { maxWidth: 200, marginTop: -10 } };
export const ReIssueOnPicker = (props: { acknowledgementReIssueResponse: AcknowledgementReIssueResponse, disabled: boolean, onPress: (controlName : string ) => void }) => {
    console.log('ReIssueOnPicker');
    console.log(props);

    const minDate = new Date(props.acknowledgementReIssueResponse.dueFrom);
    const zeroPad = (num, places) => String(num).padStart(places, '0')

    const onSelectDate = React.useCallback(
        (date: Date): void => {
            // toISODate applied browser local time offset ?
            props.acknowledgementReIssueResponse.reIssueOn = `${date.getFullYear()}-${zeroPad(date.getMonth() + 1, 2)}-${zeroPad(date.getDate(), 2)}T00:00:00.0000000`;
        }, null
    );

    const strings: IDatePickerStrings = useConst(() => ({
        ...defaultDatePickerStrings,
    }));

    return (
        <div>
            <DatePicker
                styles={datePickerStyles}
                // DatePicker uses English strings by default. For localized apps, you must override this prop.
                onSelectDate={onSelectDate}
                onAfterMenuDismiss={() => props.onPress('')}
                **onClickCapture**={event => props.onPress('ReIssueOnPicker')}
                disabled={props.disabled}                 
                strings={strings}
                placeholder="Select a date..."
                ariaLabel="Select the date to re-issue on"
                minDate={minDate}
                allowTextInput
                value={minDate}
                />
        </div>
    );
};