功能添加日志

上篇文章已经解决了我们用户输入后双向绑定，能在后台显示，并且清空的功能，那么这篇文章我们将我们获得的数据存到数组里面

logsDate用来存储学习的日志，这个数据除了当前组件logs需要使用外，logsform也需要使用，当遇到一个数据需要被多个组件使用的时候，我们可以将数据放入到这些组件共同的祖先元素中

子组件中的数据传递给父组件，父组件通过props向子组件传递一个回调函数，当我们的子组件获取到数据的时候调用回调函数，将这个数据传递给父组件，父组件收到后就可以进行操作！！

这么做的缺点：回调函数只适用于简单场景，如果中间隔了很多层，就需要其他方法了

logs.js

import LogItem from "./LogItem/LogItem";
import Card from '../UI/Card/Card.js'
import './Logs.css';
/*组件名应该和文件名一样 */
const Logs=(props)=>{
    //创建数据，将数据放入jsx中
    const LogItemDate= props.logsData.map((item)=><LogItem key={item.id} date={item.date} desc={item.desc} time={item.time}/>);


    return <Card className="logs">
    {
         LogItemDate
    }


    </Card>
}
//导出组件
export default Logs;

App.js

import Logs from "./Components/Logs/Logs.js"

import Card from "./Components/UI/Card/Card.js"

import LogsForm from "./Components/LogsForm/LogsForm.js"
import {useState}from "react"
import'./App.css'

//总组件！！！！！！！，这里引入其他组件的
/*组件名应该和文件名一样 */
const App=()=>{

    //数据
    const [logsData,setLogsData]=useState([
        {
            id:'01',
            date:new Date(2021,1,2,12,0),
            desc:"学习前端",
            time:"1"
        },
        {
            id:'02',
            date:new Date(2099,2,4,19,0),
            desc:"学习go",
            time:"2"
        },
        {
            id:'03',
            date:new Date(2034,3,6,17,0),
            desc:"学习java",
            time:"3"
        },
    ]);


    /**
     * 需要将logsform的数据传递给app组件，由app组件将新的日志添加到素组中
     * 
     * 子传父！！！！！！！！
     */
    //定义一个函数
    const saveLogHandler=(newLog)=>{
        //向新的日志中添加id，时间戳有并发的问题
        newLog.id=Date.now()+'';
        //将新数据添加到数组中
        setLogsData([...logsData,newLog])
        console.log("Appjs--->",newLog);
    }
    return <div className="app">
        {/*引入logsfrom*/}
        <LogsForm onSaveLog={saveLogHandler}/>
        <Logs logsData={logsData} />
    </div>
}

//导出组件
export default App;

logsform.js

import React from 'react';
import {useState} from 'react';
import Card from "../UI/Card/Card.js";
import './LogsForm.css';

const LogsForm =(props)=>{

    console.log(props.onSaveLog);

    const [inputDate,setInputDate]=useState('');
    const [inputDesc,setInputDesc]=useState('');
    const [inputTime,setInputTime]=useState('');
    //监听date变化
    const dateChangeHandler=(e)=>{
        setInputDate(e.target.value)
    };

    //创建一个响应函数，监听内容
    const descChangeHandler=(e)=>{
        setInputDesc(e.target.value)
    };
    //监听time
    const timeChangeHandler=(e)=>{
        setInputTime(e.target.value)
    };

    //当我们的表单提交的时候我们要汇总表单的数据，监听提交事件
    const formSubmitHandler=(e)=>{
        e.preventDefault();

        const newLog={
            date:new Date(inputDate),
            desc:inputDesc,
            time:+inputTime
        };
        //当添加新日志的时候，调用父组件传递过来的函数
        props.onSaveLog(newLog);
        //清空表达
        setInputDate('');
        setInputDesc('');
        setInputTime('');
        console.log(newLog);
    };


    return (
        <Card className="logs-form">
            <form onSubmit={formSubmitHandler}>
                <div className="form-item">
                    <label htmlFor="date">日期</label>
                    <input  onChange={dateChangeHandler} value={inputDate} id="date" type="date"></input>
                </div>
                <div className="form-item">
                    <label htmlFor="desc">内容</label>
                    <input onChange={descChangeHandler} value={inputDesc} id="desc" type="text"></input>
                </div>
                <div className="form-item">
                    <label htmlFor="time">时长</label>
                    <input  onChange={timeChangeHandler} value={inputTime} id="time" type="number"></input>
                </div>
                <div className="form-btn">
                    <button>添加</button>
                </div>
            </form>
        </Card>
    )
}


export default LogsForm;