reactjs - React 如何将日期从输入传输到其他组件？

Question

我是 React 新手，我的问题是我需要将日期从输入传输到其他组件，我有这个：

import React, {useState} from 'react';
import Components from '../../components';

  const Kalendarz = () =>{
        const {Data} = Components;
        const [date, setDate] = useState(new Date());
        return (
          <div>
            <Data date={date} />
            <input 
               name='date' 
               type='date' 
               value={date} 
               onChange={(e) => setDate(e.target.value)}
               />
           </div>
    }

  export default Kalendarz;


const Data = ({date}) => {
    // Why 'date' is undefined????
    console.log(date) 
    return(
        <div>
            <h2>Your date: {date}</h2>
        </div>
    );
}
export default Data;

我需要在这个 h2 中显示选择的日期，但它不起作用，我不知道是问题所在，组件数据中的所有时间日期都是未定义的

标签： reactjsdateinput

Answer 1

你可以这样做：

import React, { useState } from "react";

const App = () => {
  const [date, setDate] = useState(new Date());
  return (
    <div>
      <Data date={date} />
      <input
        name="date"
        type="date"
        value={date}
        onChange={(e) => setDate(e.target.value)}
      />
    </div>
  );
};

export default App;

const Data = ({ date }) => {
  return (
    <div>
      <h2>Your date: {date.toString()}</h2>
    </div>
  );
};