我有一个这样的组件
我想从第一个、第二季度和第三个月份中选择年份,但是当我选择年份并尝试选择季度时,年份消失了。
> code for year Selector
<DatePicker
selected={values.year}
onChange={(date) => setValues({ year: date })}
showYearPicker
dateFormat="yyyy"
yearItemNumber={9}
className="inputDate"
/>
> code for quarter Selector
<DatePicker
name="quarter"
onChange={(date) => setValues({ quarter: date })}
selected={values.quarter}
dateFormat="QQQ"
showQuarterYearPicker
className="inputDate"
onSelect={(date) => {
moment().endOf("quarter");
}}
/>
> code for Month Selector
<ButtonGroup className="button-container">
<Button
variant="outline-primary"
size="md"
className="month-button"
onClick={() =>
setValues({
month: moment()
.month(showMonth(values.quarter) - 3)
.format("MMMM YYYY"),
})
}
>
{moment()
.month(showMonth(values.quarter) - 3)
.format("MMMM")}
</Button>
这里有我的日期对象
const [values, setValues] = useState({
year: new Date(),
quarter: new Date(),
month: "",
});
这样可以,或者应该为每个组件使用不同的状态。
我想从每个组件中选择一个特定日期
最佳答案
当您想要使用 setValues
更改状态时,您需要在代码中清除组件之前的状态。您应该保留前一个状态并更改当前状态。可以通过Object Spread来完成。所以改变
组件中的setValues
如下:
<DatePicker
selected={values.year}
onChange={(date) => setValues({ ...values , year: date })}
showYearPicker
dateFormat="yyyy"
yearItemNumber={9}
className="inputDate"
/>
<DatePicker
name="quarter"
onChange={(date) => setValues({ ...values, quarter: date })}
selected={values.quarter}
dateFormat="QQQ"
showQuarterYearPicker
className="inputDate"
onSelect={(date) => {
moment().endOf("quarter");
}}
/>
<ButtonGroup className="button-container">
<Button
variant="outline-primary"
size="md"
className="month-button"
onClick={() =>
setValues({
...values,
month: moment()
.month(showMonth(values.quarter) - 3)
.format("MMMM YYYY"),
})
}
>
{moment()
.month(showMonth(values.quarter) - 3)
.format("MMMM")}
</Button>
关于reactjs - React Js 时间选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67883707/