рендер вытирает мои данные, как мне их сохранить?

Question

interface DateRangePickerDialogProps
{
    format:string;
    rangeEnabled:boolean;
    startDate:Date;
    endDate:Date;
    onAccept(startDate:Date, endDate:Date):void;
}


export function DateRangePickerDialog(props: DateRangePickerDialogProps & DialogProps)
{
    const [startDate, setStartDate] = useState(props.startDate);
    const [endDate, setEndDate] = useState(props.endDate);

    const onDateRangeChange = (startDate:Date, endDate:Date) =>
    {
        setStartDate(startDate);
        setEndDate(endDate);
    }

    const onAccept = () =>
    {
        props.onAccept(startDate, endDate);
        props.onHide();
        console.log(startDate, endDate)

    }

    return <Dialog {...props as DialogProps} icon={FiCalendar}>
        <DateRangePicker rangeEnabled={props.rangeEnabled} onDateRangeChange={onDateRangeChange}
            startDate={startDate} endDate={endDate} format={"dd-MMM-yyyy HH:mm:ss"}/>
            <button onClick={() => onDateRangeChange(startDate,endDate)}>Aceptar</button>
        {/* <MainButton className='dialog-button' label='Aceptar' onClick={onAccept} autoFocus={true} /> */}
    </Dialog>;
}

это мой код , и он работает почти нормально, у меня есть календарь, в котором я могу выбрать Start и EndDate, но когда я нажимаю принять в календаре, он скрывает дни, которые я выбрал. исчезнуть. Любые идеи, как я могу это исправить и сохранить дни отмечены после закрытия / открытия календаря снова? я плохо знаком с крючками ...:, (я немного потерян. enter code here

Answer 1

Другим решением было бы перенести ваше состояние в магазин с помощью решения по управлению состояниями, такого как MobX - https://mobx.js.org/README.html

MobX имеет приятную и простую кривую обучения и довольно интуитивно понятный.

Короче говоря, вы бы украсили значения в вашем магазине с помощью @observable:

export class DateRangePickerDialogStore {
    @observable startDate = undefined;
    @observable endDate = undefined;

    @action
    resetStore = () =>< {
        this.startDate = undefined;
        this.endDate = undefined;
    }

    @action
    updateStartDate = value => {
        this.startDate = value;
    }

    @action
    updateEndDate = value => {
        this.endDate = value;
    }
}

и ваш компонент с @observer:

export const DateRangePickerDialog = observer((props: DateRangePickerDialogProps & DialogProps){

...

})

, а затем вы можете устанавливать и получать значения из своего хранилища, вызывая action s или из переменных хранилища. Реализация, подобная этой, позволит вашим сохраненным значениям сохранять повторные отображения компонентов.

Надеюсь, это поможет:)

Answer 2

Вам нужно сохранить измененное значение в состоянии компонента, а затем установить его как значение для элемента ввода.

В этой статье показано, как обновить элемент ввода с помощью хуков, например, так :

import React, { useState } from "react";

export function NameForm(props) {
  const [name, setName] = useState("");
  
  const handleSubmit = (evt) => {
      evt.preventDefault();
      alert(`Submitting Name ${name}`)
  }
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Frirst Name:
        <input
          type="text"
          value={name}
          onChange={e => setName(e.target.value)}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}