重新渲染会擦除我的输入，我该如何保留它们？答案

【问题标题】：re render wipes my inputs, how do I keep them?重新渲染会擦除我的输入，我该如何保留它们？
【发布时间】：2020-01-23 22:37:58
【问题描述】：

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>;
}

这是我的代码，它几乎可以正常工作，我有一个日历，我可以在其中选择开始和结束日期，但是当我在日历上单击接受时，它隐藏了我选择的日子似乎消失了.有什么想法可以解决这个问题并在再次关闭/打开日历后标记日期？我是钩子新手... :,( 我有点迷路了。enter code here

【问题讨论】：

标签： reactjs state react-hooks

【解决方案1】：

您需要将更改后的值存储在组件的状态中，然后将其设置为输入元素的值。

This article 向您展示如何使用 Hooks 更新输入元素，如下所示：

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

【讨论】：

我正在使用钩子，所以我没有使用任何类，这就是问题所在......我有一个像这样完成的功能齐全的代码，但我试图调整它以使用反应钩子并且我遇到了一些麻烦.
@ChechesMtz 我已经更新了代码以改用钩子
很棒的兄弟，谢谢。我要尝试应用它。 ^^

【解决方案2】：

另一种解决方案是将您的状态转移到商店，使用像 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){

...

})

然后您可以通过调用actions 或从stores 变量中设置和检索值。与此类似的实现将允许您存储的值保留组件重新呈现。

希望这会有所帮助:)

【讨论】：

我必须阅读一些关于 mobx 的内容，看看我是否实现了它。谢谢^^