我们的应用程序中有<input type="date" />分，我正在努力让它像你预期的那样工作.
我在这里举了一个例子:https://codesandbox.io/s/romantic-microservice-pg62sq，但通常的问题是，如果您使用键盘输入日期(例如，01012023代表2023年1月1日)，它会认为这是一个不完整的0101日期，但只要您一键入2，它就会将其设置为2000年1月1日，由于时区/日历原因，它将呈现为Mon Dec 31 0001 23:58:45 GMT-0001 (Greenwich Mean Time)并填充控件以读取31/12/0001.
在这一点上，如果不使用鼠标，你就无法恢复，这感觉不太理想.
我知道我们可以用defaultValue而不是value来避免这个问题，但我们还有其他东西可以更新这个字段，如果可能的话，我们想要避免使用裁判
不要转换输入值并将其传递回输入元素.如您所见，它很脆弱，在重新呈现组件时可能会导致意外行为.
除非您try 进行自己的解析和输入格式化，否则存储在STATE中并传递到REACT中的输入元素的值应该始终与从事件目标检索到的.value相同.(还要注意，初始值也应该匹配，并且始终为空字符串).
相反，如果您需要以某种方式转换value，请使用derived state(也可能使用useMemo)，如下所示:
function getValueForDateInput(value: string): string {
return !value ? "" : format(new Date(value), "yyyy-MM-dd");
}
export default function App() {
const [value, setValue] = useState<string>("");
const derivedValue = useMemo(() => getValueForDateInput(value), [value]);
console.log(derivedValue)
return (
<input
autoFocus
type="date"
pattern="####-##-##"
value={value}
onInput={(e) => setValue(e.target.value)}
/>
);
}