Safari 在反应中不显示按钮

Question

我只在 Safari 中遇到问题，但找不到解决方案。我开发了一个小时列表，当你选择一天时它会显示，但问题是在 safari 中，当用户单击这一天时，小时列表没有显示，但如果你通过光标，你可以单击一个小时。这是最糟糕的部分，当您按下鼠标（选择）时，列表会呈现它。我放了一些关于这个案例的图片。

图片是截图，因为现在我没有 mac :(

这是代码：

this.state.showHours &&
    <div className="list-selection__hours">
        <div className="list-selection__hours-list">
            {hours?.map((h: hour, index: number) => {
                return (
                    <li key={index} className={"list-selection__hours-list-selecthour" + (h === selectedHour
                        ? " list-selection__hours-list-selecthour-active" : "")} onClick={this.selectHour.bind(this, h)}>
                        {h.show}
                    </li>
                );
            })}
        </div>
    </div>

抱歉我的英语水平有限，如果有人有解决方案，请告诉我:)

谢谢！！

Answer 1

我认为问题是您正在使用 onClick 来显示时间列表。这不是一个好方法，因为 onClick 仅在用户单击并释放鼠标按钮时触发。在 Safari 中，只有当用户将鼠标移到时间列表上时，时间列表才可见。因此，当用户点击日期时，不会触发 onClick 事件，并且不会出现小时列表。

更好的方法是使用 onMouseEnter 来显示小时列表。当用户将鼠标移动到元素上时会触发此事件。因此，当用户单击日期时，将触发 onMouseEnter 事件并显示小时列表。

const Calendar = ({ onChange, tileDisabled, onActiveStartDateChange, defaultActiveStartDate, locale }) => {
    const [date, setDate] = useState(new Date());
    const [showHours, setShowHours] = useState(false);
    const [hours, setHours] = useState([]);
    const [selectedHour, setSelectedHour] = useState(undefined);

    const computeHours = (date: Date) => {
        const hours = [];
        for (let i = 0; i < 24; i++) {
            const hour = {
                show: true,
                hour: i,
            };
            hours.push(hour);
        }
        return hours;
    };

    const onChange = (value: Date) => {
        // More code
        setDate(value);
        setShowHours(true);
        setHours(computeHours(value));
        setSelectedHour(undefined);
    };

    return (
        <div>
            <Calendar
                onChange={onChange}
                tileDisabled={tileDisabled}
                onActiveStartDateChange={onActiveStartDateChange}
                defaultActiveStartDate={defaultActiveStartDate}
                locale={locale}
            />
            {showHours && (
                <div className="list-selection__hours">
                    <div className="list-selection__hours-list">
                        {hours?.map((h: hour, index: number) => {
                            return (
                                <li key={index} className={"list-selection__hours-list-selecthour" + (h === selectedHour
                                    ? " list-selection__hours-list-selecthour-active" : "")} onClick={this.selectHour.bind(this, h)}>
                                    {h.show}
                                </li>
                            );
                        })}
                    </div>
                </div>
            )}
        </div>
    );
};