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

【问题标题】：How to show datepicker only when a option is selected?如何仅在选择选项时显示日期选择器？
【发布时间】：2020-10-05 18:57:08
【问题描述】：

我正在使用 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>

【问题讨论】：

您好，请贴出所有组件的代码。
我编辑了代码，但这些是 datepicker 中唯一的组件
您可以将选择值与组件的状态挂钩。如果状态正确，则有条件地呈现日期选择器。

标签： javascript html css reactjs datepicker

【解决方案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 组件进行条件检查。 React Official Doc - Conditional Rendering

【讨论】：