点击外部按钮时如何打开 HTML 选择选项菜单？

Question

我正在开发一个 React 网站，我正在尝试根据我自己的 Figma 设计自定义选择选项。

这是我的 Figma 设计，我是这样制作的：

const CustomDatePicker = ({ birthdate, handle }) => {
    const selectRef = useRef(null);

    const [month, setMonth] = useState('0');
    const [day, setDay] = useState('0');
    const [year, setYear] = useState('0');

    const months = [
        { value: '01', label: 'January' },
        { value: '02', label: 'February' },
        { value: '03', label: 'March' },
        { value: '04', label: 'April' },
        { value: '05', label: 'May' },
        { value: '06', label: 'June' },
        { value: '07', label: 'July' },
        { value: '08', label: 'August' },
        { value: '09', label: 'September' },
        { value: '10', label: 'Octorber' },
        { value: '11', label: 'November' },
        { value: '12', label: 'December' },
    ];

    const days = Array.from({ length: 31 }, (_, i) => i + 1).map((day) => ({
        value: day < 10 ? `0${day}` : `${day}`,
        label: day.toString(),
    }));

    const years = Array.from({ length: 125 }, (_, i) => 2024 - i).map((year) => ({
        value: year.toString(),
        label: year.toString(),
    }));

    const handleMonthChange = (event: any) => {
        setMonth(event.target.value);
        handle({ ...birthdate, month: parseInt(event.target.value) });
    };

    const handleDayChange = (event: any) => {
        setDay(event.target.value);
        handle({ ...birthdate, day: parseInt(event.target.value) });
    };

    const handleYearChange = (event: any) => {
        setYear(event.target.value);
        handle({ ...birthdate, year: parseInt(event.target.value) });
    };

    const handleIconClick = () => {
        // Trigger click event on select element
        selectRef.current.click();
    };

    return (
        <div style={{ display: 'flex', gap: '8px' }}>
            <div style={{ flex: 1, position: 'relative' }}>
                <select ref={selectRef} value={month} onChange={handleMonthChange} className={month == '0' ? styles.date_selector_placeholder : styles.date_selector}>
                    <option value="0" disabled className={styles.date_selector_option_item_placeholder}>Month</option>
                    {months.map((month) => (
                        <option key={month.value} value={month.value} className={styles.date_selector_option_item}>
                            {month.label}
                        </option>
                    ))}
                </select>
                <CustomIcon onClick={handleIconClick} name='arrowDownGrey' width={23} height={17} style={{ position: 'absolute', top: '14px', right: '12px' }} />
            </div>
            <div style={{ flex: 0.5, position: 'relative' }}>
                <select value={day} onChange={handleDayChange} className={day == '0' ? styles.date_selector_placeholder : styles.date_selector} style={{ flex: 0.5 }}>
                    <option value="0" disabled className={styles.date_selector_option_item_placeholder}>Day</option>
                    {days.map((day) => (
                        <option key={day.value} value={day.value} className={styles.date_selector_option_item}>
                            {day.label}
                        </option>
                    ))}
                </select>
                <CustomIcon onClick={handleIconClick} name='arrowDownGrey' width={23} height={17} style={{ position: 'absolute', top: '14px', right: '12px' }} />
            </div>
            <div style={{ flex: 0.5, position: 'relative' }}>
                <select value={year} onChange={handleYearChange} className={year == '0' ? styles.date_selector_placeholder : styles.date_selector} style={{ flex: 0.5 }}>
                    <option value="0" disabled className={styles.date_selector_option_item_placeholder}>Year</option>
                    {years.map((year) => (
                        <option key={year.value} value={year.value} className={styles.date_selector_option_item}>
                            {year.label}
                        </option>
                    ))}
                </select>
                <CustomIcon onClick={handleIconClick} name='arrowDownGrey' width={23} height={17} style={{ position: 'absolute', top: '14px', right: '12px' }} />
            </div>
        </div>
    );
};

如您所见，当我单击 CustomIcon 时，我想打开选择选项菜单，但它不起作用。我试图寻找解决方案，但还没有结果。请帮助我，谢谢大家。

为了解决这个问题，我使用了 useRef 但它不起作用。还有其他方法吗？

Answer 1

您可以在 select 的 option 元素上触发 click 事件，而不是直接在 select 元素上触发 click 事件。您的 handleIconClick 函数应如下所示：

const handleIconClick = () => {
    // Trigger click event on first option element of select element
    const option = selectRef.current.querySelector('option');
    if (option) {
        option.click();
    }
};