选择下拉选项。如何在 React select 中为下拉选项之一打开日期和时间选项

Question

我正在尝试制作食物配送 React 应用程序。在起始页上我有选项

1. 立即发货
2. 安排送货

当我选择下拉菜单并选择安排交付选项时，我希望打开日期和时间以供最终用户选择和安排交付。

我尝试了 onChange 选项，我可以设置带有消息的警报，但我希望打开一个日期和时间选项来选择何时用户（仅适用于 1 个选项）选择计划交付选项。

以下是我目前拥有的代码
在此输入图片描述

import { useState } from 'react';

export default function ImportExport() {
    const [delivery, setDelivery] = useState();

    function delivery1() {
        return setDelivery(alert("Schedule Time"));
    }

    return (
        <div className='andys1'>
            <div className='andys2'>
                <h1>Order delivery near you!</h1>
            </div>
            <div className='input'>
                <input 
                    type='text' 
                    placeholder="Find your address" 
                    style={{ width: "350px", height: "40px", fontWeight: "bold", borderRadius: "10px" }} 
                />
            </div>

            <div className='input2'>
                <label>
                    <select 
                        onChange={delivery1} 
                        style={{ width: "110px", height: "44px", fontWeight: "bold", borderRadius: "10px" }}
                    >
                        <option>Deliver Now</option>
                        <option id="Schedule Later">Schedule Later</option>
                    </select>
                </label>
            </div>

            <div className='button1'>
                <button 
                    style={{ width: "80px", height: "42px", fontWeight: "bold", color: "White", backgroundColor: "black", borderRadius: "10px" }}
                >
                    <strong>Find Food</strong>
                </button>
            </div>
        </div>
    );
}

Answer 1

试试这个：

import { useState } from 'react';

export default function ImportExport() {
    const [delivery, setDelivery] = useState("Deliver Now"); // To track the dropdown value
    const [scheduleTime, setScheduleTime] = useState(""); // To capture the scheduled time

    const handleDeliveryChange = (event) => {
        const selectedOption = event.target.value;
        setDelivery(selectedOption);
    };

    return (
        <div className='andys1'>
            <div className='andys2'>
                <h1>Order delivery near you!</h1>
            </div>

            <div className='input'>
                <input 
                    type='text' 
                    placeholder="Find your address" 
                    style={{ width: "350px", height: "40px", fontWeight: "bold", borderRadius: "10px" }} 
                />
            </div>

            <div className='input2'>
                <label>
                    <select 
                        onChange={handleDeliveryChange} 
                        style={{ width: "110px", height: "44px", fontWeight: "bold", borderRadius: "10px" }}
                    >
                        <option value="Deliver Now">Deliver Now</option>
                        <option value="Schedule Later">Schedule Later</option>
                    </select>
                </label>
            </div>

            {delivery === "Schedule Later" && (
                <div className='schedule-picker'>
                    <label>
                        Choose Date and Time:
                        <input 
                            type="datetime-local" 
                            value={scheduleTime}
                            onChange={(e) => setScheduleTime(e.target.value)}
                            style={{ marginLeft: "10px", borderRadius: "10px", padding: "5px" }}
                        />
                    </label>
                </div>
            )}

            <div className='button1'>
                <button 
                    style={{ width: "80px", height: "42px", fontWeight: "bold", color: "White", backgroundColor: "black", borderRadius: "10px" }}
                >
                    <strong>Find Food</strong>
                </button>
            </div>
        </div>
    );
}