Question

通过反应挂钩的新概念，我想发布一些数据，我正在使用useState future，因此当我更改日期时，其他日期也会更新，即ı选择的内容。我希望它是仅更新相关日期。如果ı更改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>
)

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)} />

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

1 个答案: