如何仅在选择选项时显示日期选择器？

Question

我正在使用 react-datepicker 并选择了 4 个选项，我只需要在选择选项号 3 时显示日历。这是我到目前为止的代码。const [startDate, setStartDate] = useState(new Date())<div className="input-block">   <label htmlFor="status">Status</label>   <select id="status" name="status" required>     <option value="1">Aguardando Disponibilidade</option>     <option value="2">Aguardando Agendamento</option>     <option value="3">Ativação Agendada</option>     <option value="4">Ativação Efetuada</option>   </select>   <div className="calendar">     <DatePicker       className="calendar-input"       selected={startDate}       onChange={(date) => setStartDate(date)}       showTimeSelect       timeFormat="HH:mm"       dateFormat="dd/MM/yyyy HH:mm "      />   </div></div>

Answer 1

import React, { useState } from 'react';

const YourComp = () => {

  const [selectedValue, updateSelectedValue] = useState();

  const [startDate, setStartDate] = useState(new Date())

  const onSelectChange = ({ target: { value } }) => updateSelectedValue(value);

  return (

    <div className="input-block">

     <label htmlFor="status">Status</label>

     <select

      id="status"

      name="status"

      required

      onChange={onSelectChange}

     >

       <option value="1">Aguardando Disponibilidade</option>

       <option value="2">Aguardando Agendamento</option>

       <option value="3">Ativação Agendada</option>

       <option value="4">Ativação Efetuada</option>

     </select>

   {

     selectedValue === '3'

     ? (

      <div className="calendar">

        <DatePicker

         className="calendar-input"

         selected={startDate}

         onChange={(date) => setStartDate(date)}

         showTimeSelect

         timeFormat="HH:mm"

         dateFormat="dd/MM/yyyy HH:mm "

        />

      </div>

     )

     : null

   }

</div>

  )

}

上面提到的代码应该可以解决您的问题。这个想法是进行条件检查以呈现 DatePicker 组件。