React Js 时间选择器答案

【问题标题】：React Js Time SelectorReact Js 时间选择器
【发布时间】：2021-06-08 08:03:21
【问题描述】：

我有一个这样的组件

我想从第一个、第二个季度和 3 中的月份中选择年份，但是当我选择一年并尝试选择一个季度时，年份消失了。


> 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: "",
});

这样没关系，或者应该为每个组件使用不同的状态。

我想从每个组件中选择一个特定的日期

【问题讨论】：

请分享一些代码！没有代码我们能做什么？！

标签： reactjs datepicker react-datepicker

【解决方案1】：

当您想使用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>

【讨论】：