reactjs - React Js 时间选择器

Question

我有一个这样的组件

我想从第一个、第二个季度和第 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: "",
});

可以这样，或者应该为每个组件使用不同的状态。
我想从每个组件中选择一个特定的日期

Answer 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>