javascript - 如何仅在选择选项时显示日期选择器?
问题描述
我正在使用 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>
解决方案
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 官方文档 - 条件渲染
推荐阅读
- gcc - 可视代码说编译器无法识别
- javascript - 如何放大圆形包装中的单个圆形节点
- kubernetes - 无法在本地 kubernetes 集群中部署 emissary-ingress。因“验证数据错误:ValidationError(CustomResourceDefinition.spec)”而失败
- clojure - Clojure Portal 工具:缺少异常查看器和其他自定义查看器
- stenciljs - Stencil js:更新组件外的DOM元素
- python - 在某个定义的时间范围内获取kafka队列的数据
- spring - 如何使用带有继承的 ConfigurationProperties 来绑定 yml 文件中的属性值
- android - Google cast:接收器应用程序中的 AES-128 加密
- sql-server - 如何在 SQL Server 中过滤 xml 数据类型列
- r - lapply 内部的 for 循环问题