React组件之间的通信：子组件向父组件传递数据案例(回调函数)

日历搜索（子组件向父组件传递数据的方法———回调函数）*

一、准备工作：

​ 1、创建myProject02工程目录。

​ 2、创建清单文件。 [npm init -y](//catch抛出错误 为了保证后面的逻辑可以正常运行)

​ 3、根据需要安装第三方依赖包，这里用到三个包，分别是react(核心库)、react-dom(Dom包)、react-scripts(继承由babel)。 [npm install react reacat-dom react-scripts --save](//catch抛出错误 为了保证后面的逻辑可以正常运行)

​ 4、在工程目录下创建public文件夹，并在该文件夹下创建index.html。

​ 5、在工程目录下创建src文件夹，并在该文件夹下创建入口文件index.js、外层组件(父组件)App.js和外层组件样式文件App.css。

​ 6、在src目录下创建components文件夹 (由于子组件可能会分别由自己的css样式，所以这里单独创建一个用于存放子组件的文件夹)。

​ 7、在components文件夹下，分别创建LogForm、Logs(Log文件夹)、LogSearch子组件文件夹

​ 8、LogForm文件夹下创建LogForm.css用于编写子组件css样式、创建LogsForm.jsx用于编写子组件相关代码；Logs文件夹下创建Logs.css、Logs.jsx，在该文件夹下在创建一个Log文件夹(Log.jsx、Log.css)；LogSearch文件夹下创建LogSearch.css、LogSearch.jsx。

​ 9、工程目录：

​

二、编写各组件的代码：

​ 1、index.html：只有一个根Dom元素

			 <div id="root"></div>

​ 2、入口文件index.js：

import ReactDOM from 'react-dom/client'
import App from './App'

const   root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App />)

​ 3、外层组件App.js：

	import React,{
   Component} from 'react'
	import Logs from './components/Logs/Logs'
	import './App.css'
	import LogForm from './components/LogForm/LogForm'
	import LogSearch from './components/LogSearch/LogSearch'

	export default class App extends Component {
   
   		 state = {
   
    	    logs:[]
    	}
   		 search = ''// 钩子函数
		componentDidMount() {
   
    	// 获取localStorage中的数据
   		 let logs = localStorage.getItem('logs')
  	  	// 如果logs为空 就让它等于一个空数组  方便以后遍历
    		if(logs === null) {
   
     		   logs = []
   			 }else{
   
      		   logs = JSON.parse(logs)
    		}
    		this.setState({
   
       			 logs
    		})
	}

	// 添加数据 用于子组件LogForm 调用  完成添加数据操作
	addLogHandle = newThing =>{
   
        let {
   logs} = this.state
    	logs.push(newThing) //把传过来的数据 push到logs中
    	//修改logs
    	this.setState({
   
    	    logs
   		 })
   		 // 设置localStorage--把数据存放到localStorage中
   		 localStorage.setItem('logs',JSON.