reactjs - 将 react-calendar 值传递给另一个组件后获取它

Question

我试图从我创建的日历组件传递到我创建的输入组件时获取反应日历的值。过期后如何获取日期？这是来自输入组件-

import React from "react";
import Calendar from "./Calendar";

function Input()
{
    return(
        <div >
        <Calendar />
    

这是来自日历组件-

    import React, {useState} from "react";
import Calendar1 from "react-calendar";


function Calendar()
{
    const [value, onChange] = useState(new Date());
   
    
    return(
        

        <div class="d-flex justify-content-center">
            <Calendar1 
            onChange={onChange}
            value={value}
            /> 
            
            
        </div>
    );
}
export default Calendar;

Answer 1

据我了解，您希望将 Calendar 的值保留在其父元素 Input 中。您可以不在子组件中而是在父组件中创建钩子，并将 setter 作为更改值回调的处理程序传递（关于日历中的 onChange 阅读此处）。

const Input = () => {
    const [inputValue, setInputValue] = useState('')

    const handleInput = value => setInputValue(value)

    return (
        <Calendar onChange={handleInput} />
    )
}

const Calendar = ({onChange}) => (
    <Calendar1 onChange={onChange} />
)