React中如何将自定义DateFormat组件值绑定到输入框？

问题说明 #

自定义的DateFormat组件在直接渲染文本时能正常生成格式化后的日期，但将其作为<input type="date">的value属性传入时无法正常工作，无法得到期望的日期字符串值。

现有代码 #

DateFormat.jsx 组件代码 #

import React from "react";

const DateFormat = ({ seconds, nanoseconds, format }) => {
  const dates = new Date(seconds * 1000 + nanoseconds / 1000000);
  const day = new Date(dates).toLocaleString("default", { day: "2-digit" });
  const month = new Date(dates).toLocaleString("default", { month: "2-digit" });
  const year = new Date(dates).toLocaleString("default", { year: "numeric" });

  if (format === "dd/mm/yyyy") {
    return <>{day + "/" + month + "/" + year}</>;
  }
  return <>{year + "-" + month + "-" + day}</>;
};

export default DateFormat;

正常调用示例 #

以下调用方式可正常渲染出格式化后的日期：

<DateFormat
  nanoseconds={dt.dob.nanoseconds}
  seconds={dt.dob.seconds}
  format={"dd/mm/yyyy"}
/>

输出结果：

12/02/2001

无法正常工作的场景（填入输入框） #

尝试将组件结果作为输入框value时失效：

<input
  type="date"
  className="form-control"
  id="input-datetime-local"
  value={
    <DateFormat
      nanoseconds={dt.dob.nanoseconds}
      seconds={dt.dob.seconds}
      format={"yyyy/mm/dd"}
    />
  }
  onChange={(e) => {
    e.preventDefault();
  }}
  name="dob"
/>

期望的正确结果：

<input
  type="date"
  className="form-control"
  id="input-datetime-local"
  value="2001/02/12"
  onChange={(e) => {
    e.preventDefault();
  }}
  name="dob"
/>

解决方法 #

问题核心是DateFormat组件返回的是React元素（JSX），而<input>的value属性需要的是字符串类型。我们可以把日期格式化逻辑抽成独立的工具函数，既供组件使用，也能直接调用获取字符串值。

1. 抽离日期格式化工具函数 #

修改DateFormat.jsx，将格式化逻辑提取为独立函数：

import React from "react";

// 抽离的日期格式化工具函数
export const formatDate = (seconds, nanoseconds, format) => {
  const dates = new Date(seconds * 1000 + nanoseconds / 1000000);
  const day = new Date(dates).toLocaleString("default", { day: "2-digit" });
  const month = new Date(dates).toLocaleString("default", { month: "2-digit" });
  const year = new Date(dates).toLocaleString("default", { year: "numeric" });

  if (format === "dd/mm/yyyy") {
    return `${day}/${month}/${year}`;
  } else if (format === "yyyy/mm/dd") {
    return `${year}/${month}/${day}`;
  }
  return `${year}-${month}-${day}`;
};

const DateFormat = ({ seconds, nanoseconds, format }) => {
  return <>{formatDate(seconds, nanoseconds, format)}</>;
};

export default DateFormat;

2. 调用工具函数给输入框赋值 #

在需要使用输入框的页面，直接调用formatDate函数获取字符串值：

import { formatDate } from './DateFormat';

// ...其他代码

<input
  type="date"
  className="form-control"
  id="input-datetime-local"
  value={formatDate(dt.dob.seconds, dt.dob.nanoseconds, "yyyy/mm/dd")}
  onChange={(e) => {
    e.preventDefault();
  }}
  name="dob"
/>

注意：<input type="date">的标准格式是yyyy-MM-dd（横杠分隔），如果使用斜杠可能无法被正确识别，建议调整格式参数为对应标准格式。

内容的提问来源于stack exchange，提问作者Srinivas Bendkhale