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

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 组件。