Я не могу получить значение в поле ввода из пользовательского компонента.
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 на другой странице, как в примере ниже, все работает нормально.
<DateFormat
nanoseconds = {dt.dob.nanoseconds}
seconds = {dt.dob.seconds}
format = {"text"}
/>
Вывод такой, как показано ниже
02.12.2001
Однако когда я хочу получить значение в текстовом поле или DatePicker, это не работает нормально.
<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"
/>
🤔 А знаете ли вы, что...
JavaScript позволяет создавать динамические и интерактивные веб-приложения.
input реквизит value элемента набирается как
React.InputHTMLAttributes<HTMLInputElement>.value?: string | number | readonly string[] | undefined
Это означает, что вы можете передать строку, массив строк, число или неопределенное значение в качестве значения. Передача JSX недопустима.
Я предлагаю преобразовать DateFormat в служебную функцию, которая возвращает вычисленное строковое значение.
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].join("/");
}
return [year, month, day].join("-");
};
export default formatDate;
<input
type = "date"
className = "form-control"
id = "input-datetime-local"
value = {formatDate({
nanoseconds: dt.dob.nanoseconds,
seconds: dt.dob.seconds,
format: "dd/mm/yyyy", // <-- pass correct format for condition test
})} // <-- "02/12/2001" | "2001-02-12"
onChange = {(e) => {
e.preventDefault();
}}
name = "dob"
/>