javascript - 仅更新我更改其他状态的日期不应更新或更改 ReactJS/React-Hooks

Question

通过 react hooks 的新概念，我想发布一些我正在使用 useState 未来的数据，所以当我更改日期时，其他日期也会更新我选择的内容。我希望它只更新相关日期。如果我改变 planRegisterStartDate 所以其他人不应该影响我怎么能做到这一点我 usereact-datepicker 包

const [planGroupData, setPlanGroupData] = useState({
    planGroupName: '',
    PlanGroupYear: '',
    planRegisterStartDate: new Date(),
    planRegisterFinishDate: new Date(),
    projeRegisterStartDate: new Date(),
    projeRegisterFinishDate: new Date()
  })

  const onPlanGroupDateChange = date => {
    setPlanGroupData({
      planRegisterStartDate: date,
      planRegisterFinishDate: date,
      projeRegisterStartDate: date,
      projeRegisterFinishDate: date
    })
  }
const {
    PlanGroupYear,
    planGroupName,
    planRegisterFinishDate,
    planRegisterStartDate,
    projeRegisterFinishDate,
    projeRegisterStartDate
  } = planGroupData

 return (
 <div className='form-row'>
          <DatePicker
            selected={planRegisterStartDate}
            onChange={onPlanGroupDateChange}
          />
 <DatePicker
            selected={planRegisterFinishDate}
            onChange={onPlanGroupDateChange}
          />
        </div>
)

标签： javascriptdatepickerreact-hooksreact-datepicker

Answer 1

您可以分离您的状态并单独定义集合函数，然后您可以在它们各自的组件中调用这些函数。在我看来，这将更易于管理。

const [planGroupName, setPlanGroupName] = useState(null)
const [planGroupYear, setPlanGroupYear] = useState(null)
const [planRegisterStartDate, setPlanRegisterStartDate] = useState(new Date())
const [planRegisterFinishDate, setPlanRegisterFinishDate] = useState(new Date())
const [projeRegisterStartDate, setProjeRegisterStartDate] = useState(new Date())
const [projeRegisterFinishDate, setProjeRegisterFinishDate] = useState(new Date())


<DatePicker selected={planRegisterStartDate}
            onChange={date => setPlanRegisterStartDate(date)} />
<DatePicker selected={planRegisterFinishDate} 
             onChange={date => setPlanRegisterFinishDate(date)} />