佛山微网站推广哪家专业100个经典产品设计

当前位置： 首页 > news >正文

佛山微网站推广哪家专业,100个经典产品设计,网络推广的策略方法,做网站菏泽文章目录 项目地址一、创建第一个react项目二、JSX语法2.1 生成列表2.2 大括号识别JS的表达式2.3 列表循环array2.4 条件判断以及假值显示2.5 复杂条件渲染2.6 事件处理2.7 添加CSS样式2.8 添加图片2.9 使用Fregments返回多个根标签2.10多条件渲染2.11 导出子组件2.12 给子组件… 文章目录 项目地址一、创建第一个react项目二、JSX语法2.1 生成列表2.2 大括号识别JS的表达式2.3 列表循环array2.4 条件判断以及假值显示2.5 复杂条件渲染2.6 事件处理2.7 添加CSS样式2.8 添加图片2.9 使用Fregments返回多个根标签2.10多条件渲染2.11 导出子组件2.12 给子组件传递多个属性 三、组件3.1 设置组件3.2 props给子组件传递参数3.3 给props设置默认值3.4 给子组件传递childrendiv的children3.5 给子组件传递事件监听3.6 子组件传值给父组件 四、State4.1修改数组的值(添加与删除)4.2 给setState传参4.3修改类的值(增删改)4.3.1 增加4.3.2 修改4.3.3 删 五、表单处理事件5.1 表单的输入和保存双向绑定5.2 处理input,select,radio,checkbox5.2.1 input5.2.2 单选5.2.3 下拉5.2.4 多选5.2.5 合并表达的多个状态5.2.6 使用循环处理多个checkboxes5.2.7 表单整体提交处理与重置5.2.8 表单验证 六、使用unEffect消除副作用6.1 消除副作用6.2 指定useEffect的执行时机6.3 清理副作用6.4 在useEffect()中执行异步 2.3 事件绑定2.2.1 给onclick绑定一个事件2.2.2 获取点击事件 e2.2.3 传递自定义参数2.2.4 传递自定义参数 e 2.5 使用循环生成内容2.6 Reack Hook2.6.1 State2.6.2 useState 钩子函数 2.7 使用ref获取原生DOM对象2.8 将css组件化prop.children2.8.1 props默认传值2.8.2 提取公共的css 2.9 监听表单的内容变化提交表单2.10 使用State保存表单数据(双向绑定) 项目地址 教程作者SGG教程地址 https://www.bilibili.com/video/BV1wy4y1D7JT/?spm_id_from333.999.0.0vd_source791e6deaa9c8a56b1f845a0bc1431b71代码仓库地址 所用到的框架和插件 Es6ract prettier

• vscode设置:bracket paris一、创建第一个react项目 执行创建命令,创建名为react-basic的项目文件 npx create-react-app react-basic进入到项目的根目录开启react服务 npm start核心流程App被引入到了index.js里然后被渲染到了public/index.html里
  二、JSX语法 JSX是react编写UI模板的方式表示在JS里编写HTML模板解构他不是标准的js语言浏览器本身不能识别需要通过解析后才能在浏览器里运行JSX中{}里嵌入的是表达式有值的语句才是表达式如果表达式有空布尔值undefined他是不会显示的直接设置标签时style必须使用对象设置
  2.1 生成列表 jsx自动将数组的元素在页面中显示使用array.map方法循环列表添加li生成列表的时候一定要个key const arr [猪八戒, 孙悟空, 唐僧, 沙和尚];const App () {return (div classNameAppul{arr.map(item div{item}/div)}/ul/div); }使用for循环或者foreach const arr [猪八戒, 孙悟空, 唐僧, 沙和尚]; const liList [];arr.forEach(item {item.push(li key{item}{item}/li); });2.2 大括号识别JS的表达式 ①只能识别表达式②style必须以对象形式传入{{}} function App() {return (div classNameAppthis is a react app{/* 使用引号传递字符串 /}{This fxx}{/ 识别JS变量 /}{num}{/ 函数,直接显示方法的返回值 /}{getName()}{/ 方法调用 /}{new Date().toLocaleTimeString()}{/ 使用js对象,驼峰 /}div style {{color: red, fontSize: 50px}} this is a red div /div/div) }2.3 列表循环array ①循环列表必须给Key值②使用map循环 const list [{id:1001,name:tom},{id:1002,name:jerry},{id:1003,name:kitty} ]function App() {return (div classNameApp{list.map((item)li key{item.id}{item.name}/li)}/div) }export default App;2.4 条件判断以及假值显示 只能用三元运算符或者 || ! 条件表达式不能使用if判断 条件表达式当为真返回后面的表达式假则返回前面的 const islogin truefunction App() {return (div classNameApp{islogin ? h2欢迎回来/h2 : h2请登录/h2}{isloginh2用户名{list[0].name}/h2}/div) }jsx会将0和NaN 显示在页面上其他得假值则为空 2.5 复杂条件渲染 根据传来的listType匹配不同的jsx的模板 const listType 5//根据listTpye返回不同的jsx模板 function getListType() {if (listType 0) {return div单图模式/div}else if (listType 1) {return div两图模式/div}else if (listType 2) {return div多图模式/div}else {return div默认模式/div} } const islogin truefunction App() {return (div classNameApp{getListType()}/div) }2.6 事件处理 ①改为驼峰命名②写了()的话创建时直接调用 给事件传参并且返回一个立即执行的函数也可以实现相同效果 import React from react;const islogin false;const handleclick (name) {return () {alert(name);}; };function App() {return (div classNameApph1hello world/h1button onClick{handleclick(FXX)}click me/button/div); }export default App;例2 const handleclick () {return () {alert(hello world);}; };function App() {return (div classNameApph1hello world/h1button onClick{handleclick()}click me/button/div); }export default App;2.7 添加CSS样式 ①引入css;②将需要添加样式的地方添加样式的className 2.8 添加图片 ①使用import先导入图片②直接在jsx里使用{}使用 2.9 使用Fregments返回多个根标签 react默认只能返回一个根标签但是使用Fregments可以返回多个 function User() {return (Fragmentp用户名张三/pp职业前端工程师/p/Fragment); }2.10多条件渲染 假如需要从网络服务器请求一组数据请求过程显示请求中请求成功返回数据后显示数据这是一个副作用的例子 function App() {const [user, setUser] useState();useEffect(() {//使用setTimeout模拟请求延迟3秒后返回用户数据setTimeout(() {setUser({name: 张三,occupation: 前端工程师,});}, 3000);}, []);if (!user) {return div classNameloadingloading…/div;}return (main classNamecontainerp用户名{user.name}/pp职业{user.occupation}/p/main); } 2.11 导出子组件 设置 组件导出 function Menu({ children }) {return nav{children}/nav; }function Item({ children }) {return a href#{children}/a; }//将组建导出 Menu.Item Item;export default Menu;使用子组件 function App() {return (MenuMenu.Item主页/Menu.ItemMenu.Item关于/Menu.ItemMenu.Item联系/Menu.Item/Menu); }2.12 给子组件传递多个属性 三、组件 独立的组件单独放在一个模块文件夹里一个大组件和他的卫星组件可以一起放在一个文件里的同级目录 3.1 设置组件 PostListItem是组件名里面文件夹是组件的样式和jsx index.js: 将需要做成组件的部分放入到function内部 import ./style.css;function PostListItem() {return (div classNamepost key{blog.id}img src{blog.author.avatar} alt /div classNamepostContainerp classNamepostContent{blog.content}/pdiv classNamepostMetap classNamepostAuthor{blog.author.name}/pp classNamepostDate{blog.publishDate}/p/div/div/div); }export default PostListItem;将该组件的css样式放入到style.css中 3.2 props给子组件传递参数 将需要传递的参数值array类当作参数传入组件 div classNamepostList{microBlogs.length 0 ? (microBlogs.map((blog, index) (PostListItem blog{blog} key{blog.id} /))) : (p暂无微博/p)}在组件中使用参数 import ./style.css;function PostListItem(props) {return (div classNamepostimg src{props.blog.author.avatar} alt /div classNamepostContainerp classNamepostContent{props.blog.content}/pdiv classNamepostMetap classNamepostAuthor{props.blog.author.name}/pp classNamepostDate{props.blog.publishDate}/p/div/div/div); }export default PostListItem; 组件在接受props的时除了直接传递props外还可以使用解构来接收这样就不需要使用props.blog 来使用 3.3 给props设置默认值 ①防止报错②页面显示正常 如果我们在传递列表或者类的过程中没有内容可能会导致页面报错此时我们需要传递默认值 function PostListItem({ blog { author: } }) {return (div classNamepostimg src{blog.author.avatar} alt /div classNamepostContainerp classNamepostContent{blog.content}/pdiv classNamepostMetap classNamepostAuthor{blog.author.name}/pp classNamepostDate{blog.publishDate}/p/div/div/div); }注意需要给blog里的.属性也设置默认值 3.4 给子组件传递childrendiv的children ①通过给当前组件的props添加一个children方式并且在组件内部添加div{children}div的方式来接收这个结构②传递结构的父组件需要将单个标签PostListItem/改为对标签PostListItemchildrenPostListItem/,标签里的内容就是children; index.js function PostListItem({ blog { author: }, children }) {return (div classNamepostimg src{blog.author.avatar} alt /div classNamepostContainerp classNamepostContent{blog.content}/pdiv classNamepostMetap classNamepostAuthor{blog.author.name}/pp classNamepostDate{blog.publishDate}/p/div/divdiv{children}/div/div); }App.js div classNamepostList{microBlogs.length 0 ? (microBlogs.map((blog, index) (PostListItem blog{blog} key{blog.id}a href#编辑/a //这里就是children,可以是结构也可以是其他的组件/PostListItem))) : (p暂无微博/p)} /div此外传递的children还可以是其他的组件 function EditAndDelete({ onEdit }) {return (div{/ 绑定事件 /}a href# onClick{onEdit}编辑/a{ }a href#删除/a/div); }3.5 给子组件传递事件监听 作用让组件复用性更高 给组件添加事件监听这个事件监听是父类传来的方法 //传递事件的props function EditAndDelete({ onEdit }) {return (div{/ 绑定事件 /}a href# onClick{onEdit}编辑/a{ }a href#删除/a/div); }在这个文件里我们并没有直接写onEdit的方法而是使用props将父类的方法传递进来. 在父类里定义onEdit的方法这里为了简单直接用箭头函数传递 div classNamepostList{microBlogs.length 0 ? (microBlogs.map((blog, index) (PostListItem blog{blog} key{blog.id}EditAndDelete onEdit{() console.log(blog.id)} //PostListItem))) : (p暂无微博/p)}/div如果我们想对父类传来的onEdit方法进行自己的一些定制可以先定义自己的方法然后传递父类的onEdit在将自己的方法传递给onClick事件 //传递事件的props function EditAndDelete({ onEdit }) {//将父类传递的方法定制化在使用function handleEdit(e) {e.preventDefault();if (onEdit) {console.log(定制了onEdit,组织了跳转);onEdit();}}return (div{/ 绑定事件 /}a hrefwww.baidu.com onClick{handleEdit}编辑/a{ }a href#删除/a/div); }3.6 子组件传值给父组件 事件中只要将需要传递的参数放在子组件里的onClick方法里并且父组件用action接受就可以完成传递 子组件 //传递事件的props function EditAndDelete({ onEdit }) {function handleEdit(e) {e.preventDefault();if (onEdit) {console.log(定制自己的方法阻止了跳转);onEdit(需要给父组件传递的参数);}}return (div{/ 绑定事件 /}a href# onClick{handleEdit}编辑/a{ }a href#删除/a/div); }父组件 PostListItem blog{blog} key{blog.id}EditAndDeleteonEdit{(action) console.log(blog.id, action)}//PostListItem四、State import {useState} from reac;const [状态值更改后的值, 修改状态的函数] useState(初始值最初的值);只要给修改状态的函数传递新的值之后就会显示更改后的值状态值 import React from react;function App() {const [count, setCount] React.useState(123123);function handleClick() {setCount(hello);}console.log(count, count);return (divh1{count}/h1button onClick{handleClick}只更新一次/button/div); }export default App;4.1修改数组的值(添加与删除) 由于数组是引用类型所以需要修改后传入新的数组可以使用解构也可以直接使用赋值新的数组给setState 解构 function App() {const [count, setCount] React.useState([1, 2, 3, 4]);function handleClick() {setCount([…count, 5]);}console.log(count, count);return (divh1{count}/h1button onClick{handleClick}更改数组/button/div); }直接赋值给新的数组 import React from react;function App() {const [count, setCount] React.useState([1, 2, 3, 4]);function handleClick() {const ar […count];ar.push(5);setCount(ar);}删除我们也只能使用filter function handleDelete(item) {setLIst(list.filter((v) v ! item));}4.2 给setState传参 我们如果想在onclick里事件给setState传递参数 就必须使用 button onClick{() handleClick(100)}更改数组/button4.3修改类的值(增删改) 类也是引用类型所以修改的方式也是使用解构 4.3.1 增加 添加新的属性 setPerson({ …persion, gender: 男 })4.3.2 修改 修改旧的属性 setPerson({ …persion, gender: 女 })4.3.3 删 删除属性 const newPerson {…Person}; delete newPerson.age; setPerson(newPerson);使用解构 const {age,…newPerson} person; setPerson(newPerson);注意嵌套类和嵌套数组一定要将内部嵌套的类型解构否则直接修改会判定没有变化 五、表单处理事件 onInput实时的监听输入内容 onChange失焦后才监听内容 5.1 表单的输入和保存双向绑定 我们需要获取用户的输入 function handleUserInput(e) {console.log(e.target.value);}textareaonChange{handleUserInput}/textarea点击发布获取用户的输入这里使用State来保存用户输入 //定义state保存用户的值默认值为空const [microBlog, setMicroBlog] useState();function handlePublish() {console.log(microBlog);}当用户写了新的内容后获取用户最新的值 function handleUserInput(e) {setMicroBlog(e.target.value);}发布后将输入框的内容清空 ①设置清空 function handlePublish() {console.log(microBlog);setMicroBlog( )}②将清空后的State的值放入到text的value里这样当最后一次清空了状态状态值会显示在value里 div classNamepublishBlogtextareaonChange{handleUserInput}value{microBlog}placeholder写点什么吧…/textareabutton onClick{handlePublish}发布/button/div将刚才获取到的用户输入内容组装成为一个新的对象 function handlePublish() {// console.log(microBlog);const newMicroBlog {id: microBlogs.length 1,author: {name: 张小丰,avatar: UserImage1,},content: microBlog,publishDate: new Date().toISOString().split(T)[0],};}使用State将新组建的数组存储起来 ①将之前的数据放入到一个新的state里 const [microBlogs, setMicroBlogs] useState([{id: 1,author: {name: 张小丰,avatar: UserImage1,},content:这是一条微博信息今天的天气真不错啊出去玩啊你们觉得怎么样要不下午4 点出去,publishDate: 2022-10-25,}]);②使用解构将新的实例存储起来 function handlePublish() {// console.log(microBlog);const newMicroBlog {id: microBlogs.length 1,author: {name: 张小丰,avatar: UserImage1,},content: microBlog,publishDate: new Date().toISOString().split(T)[0],};setMicroBlogs([…microBlogs, newMicroBlog]);} 5.2 处理input,select,radio,checkbox 5.2.1 input input标签 label htmlForpassword密码/label input typetext idusername value{username} onChange{handleUsernameChange} /设置state const [username, setUsername] useState();function handleUsernameChange(e) {setUsername(e.target.value);}5.2.2 单选 单选通过checked{gender male} 来判断是否选择 fieldset idgenderinput typeradio idmale namegender valuemale checked{gender male} onChange{handleGenderChange} /label htmlFormale男/label5.2.3 下拉 单选 label htmlForoccupation职业/labelselect idoccupation value{occupation} onChange{handleOccupationChange} option value请选择/optionoption valuefrontend前端/optionoption valuebackend后端/optionoption valuefullstack全栈/option/select5.2.4 多选 多选的State和上面3个不一样因为他涉及了array的添加和删除 function handleHobbiesChange(e) {const { checked, value } e.target;if (checked) {setHobbies([…hobbies, value]);} else {setHobbies(hobbies.filter((hobby) hobby ! value));}}标签里添加name属性用于之后状态的判断并修改为统一的handleHobbiesChange fieldset idhobbiesinput typecheckbox namehobby valueprogramming idprogramming onChange{handleHobbiesChange} checked{hobbies.includes(programming)}/label htmlForprogramming编程/labelinput onChange{handleHobbiesChange} checked{hobbies.includes(drawing)}//fieldset根据name属性更新事件 function handleInputChange(e) {let { value, name, type } e.target;if (type checkbox) {const { checked } e.target;if (checked) {value […user.hobbies, value];} else {value user.hobbies.filter((hobby) hobby ! value);}}setUser({…user,[name]: value,});}5.2.5 合并表达的多个状态 定义统一的状态放在一个实例中 const [user, setUser] useState({username: ,password: ,repeatPassword: ,gender: ,occupation: ,hobbies: [],});合并事件处理函数 function handleInputChange(e) {let { value, name, type } e.target;if (type checkbox) {const { checked } e.target;if (checked) {value […user.hobbies, value];} else {value user.hobbies.filter((hobby) hobby ! value);}}setUser({…user,[name]: value,});}给标签添加name的属性用来判断 label htmlForusername用户名/labelinput nameusername typetext idusername value{user.username} onChange{handleInputChange} /5.2.6 使用循环处理多个checkboxes 将多个复选框不同的地方放在一个数组中循环数组 const hobbies [{ value: programming, label: 编程 },{ value: drawing, label: 绘画 },{ value: music, label: 音乐 },];fieldset idhobbies{hobbies.map((hobby) (Fragmentinputtypecheckboxnamehobbiesvalue{hobby.value}id{hobby.value}onChange{handleInputChange}checked{user.hobbies.includes(hobby.value)}/label htmlFor{hobby.value}{hobby.label}/label/Fragment))}/fieldset5.2.7 表单整体提交处理与重置 在form标签上添加事件处理 form onSubmit{handleFormSubmit}将提交的表单数据保存 function handleFormSubmit(e) {e.preventDefault();console.log(user);}给form添加一个onReset事件 form onSubmit{handleFormSubmit} onReset{handleFormReset}重置 4. 设置表单的初始状态 const initialUser {username: ,password: ,repeatPassword: ,gender: ,occupation: ,hobbies: [],};const [user, setUser] useState(initialUser);事件监听useState function handleFormReset() {setUser(initialUser);}5.2.8 表单验证 创建一个状态来存储表达的错误 const [formErrors, setFormErrors] useState({});定义校验规则 const rules {username: (value) {if (value.length 3 || value.length 12) {return 用户名必须大于 3 且小于 12 个字符;}},password: (value) {if (!/^(?.[A-Za-z])(?.*\d)[A-Za-z\d]{8,}\(/.test(value)) {return 密码必须大于 8 个字符且至少包含一个字母和数字;}},}; 保存错误信息 const error rules[name] rules[name](value);setFormErrors({...formErrors,[name]: error,});}修改页面添加错误显示 {formErrors.username (span classNameformError{formErrors.username}/span)}在提交表单时验证错误信息是否消除 function handleFormSubmit(e) {e.preventDefault();for (let rule of Object.keys(rules)) {const error rules[rule](user[rule]);if (error) {setFormErrors({...formErrors,[rule]: error,});return;}}console.log(user);}六、使用unEffect消除副作用 组件发生监听事件网络请求设置定时器在Reac当中就是组件副作用 6.1 消除副作用 设置定时器网络请求各种异步操作都在useEffect里执行 useEffect(() {const id setInterval(() {setDateTime(new Date());}, 1000);console.log(id);}, []); 6.2 指定useEffect的执行时机 给[]内添加处触发的事件当refresh的状态发生改变触发useEffect function App() {const [dateTime, setDateTime] useState(new Date());const [refresh, setRefresh] useState(0);useEffect(() {setDateTime(new Date());}, [refresh]);return (main classNamecontainerh1{dateTime.toLocaleString(zh-CN)}/h1button onClick{() setRefresh(refresh 1)}刷新/button/main); }6.3 清理副作用 function App() {const [dateTime, setDateTime] useState(new Date());const [refresh, setRefresh] useState(0);useEffect(() {const id setInterval(() {setDateTime(new Date());}, 1000);console.log(id);//清理副作用return () {clearInterval(id);console.log(清理了 id 为 id 的 interval);};}, []);useEffect(() {setDateTime(new Date());}, [refresh]);return (main classNamecontainerh1{dateTime.toLocaleString(zh-CN)}/h1button onClick{() setRefresh(refresh 1)}校准/button/main); }6.4 在useEffect()中执行异步 需要将异步方法先定义成为一个函数然后再useEffect里调用 function App() {const [dateTime, setDateTime] useState(new Date());useEffect(() {updateTime();}, []);async function updateTime() {await new Promise((resolve) setTimeout(resolve, 3000));setDateTime(new Date());}return (main classNamecontainerh1{dateTime.toLocaleString(zh-CN)}/h1/main); }2.3 事件绑定 react中取消默认行为e.preventDefault() 2.2.1 给onclick绑定一个事件 给鼠标的onclick事件绑定一个方法 const handleclick () {alert(hello world) }function App() {return (div classNameApph1hello world/h1button onClick{handleclick}click me/button/div) }export default App;2.2.2 获取点击事件 e 获取点击事件e const handleclick (e) {return console.log(e) }2.2.3 传递自定义参数 传递自定义参数 注意onClick后面的写法必须使用箭头函数延迟执行如果直接传参调用会在button创建的时候直接执行 const handleclick (name) {return console.log(name) }function App() {return (div classNameApph1hello world/h1button onClick{()handleclick(fxx)}click me/button/div) } 2.2.4 传递自定义参数 e 既传递自定义参数也传递点击事件 e const handleclick (name,e) {return console.log(name,e) }function App() {return (div classNameApph1hello world/h1button onClick{(e)handleclick(fxx,e)}click me/button/div) }2.5 使用循环生成内容 这里是手动添加的循环实际我们需要模拟服务端来的数据 模拟服务端的数据 const notBookJson [{content: 学习英语,stuTime: 1500,month: 11月,day: 14,},{content: 阅读英文书籍,stuTime: 1200,month: 10月,day: 20,},{content: 练习听力,stuTime: 800,month: 9月,day: 5,},{content: 背诵单词,stuTime: 600,month: 11月,day: 1,}, ];使用map循环数据 const addData notBookJson.map((item) (NoteItemskey{item.id}content{item.content}stuTime{item.stuTime}month{item.month}day{item.day}/ ))const NoteBook () {return (div classNamelogs{addData}/div); };export default NoteBook;2.6 Reack Hook React中的钩子函数只能用于函数组件或者自定义钩子中钩子函数只能在函数组件内部调用不能再外部调用 2.6.1 State State是组件本身的状态不能传递给其他组件State是可变的当Stage发生变化会自动对该组件进行刷新,所以必须写在组件顶部在函数组件中我们需要使用hook函数获取State的 2.6.2 useState 钩子函数 useState() 返回一个数组第一个值是我们传递的值(字符串arrayfunctionclass都可以)第二个值是函数通常命名为setXXXX调用该函数setCounter(新值)修改state后会触发组件重新渲染并且将传入该函数的值当作新的counter改的并不是当前的值而是下一次渲染的值setState()他是异步渲染当我们调用它需要用旧的值时会出现计算错误为了避免这种情况我们可以通过回调函数来设置setState(); const flag 1 const [counter, setCounter] useState(flag)点击按钮页面数字翻倍 import ./App.css; import React, { useState } from react;function App() {//设置一个初始状态初始值为12,返回初始值和一个const [valueAdd1, setCount] useState(12);//定义一个点击事件每次点击给const handleClick () {setCount(valueAdd1 *2);};return (div classNameAppbutton onClick{handleClick}点击我初始值1/buttondiv classNameshowValue{valueAdd1}/div/div); }export default App;2.7 使用ref获取原生DOM对象 了解 2.8 将css组件化prop.children 该方案是将公共的css属性放在一个div里让这个div成为他们的父类 2.8.1 props默认传值 当组件中存在嵌套内容时React 会自动将标签的内容属性传递给props const NoteBook () {return (Card classNamelogs stylefontSize:12px{addData}/Card); };Card.js function Card(props) {console.log(props)return (// div className{card props.className}div className{card \){props.className}}{props.children}/div) }在控制台看到className, 所有的属性已经标签的内容这里是{addData}的列表) 都被当作了默认的数值传到了props里
  2.8.2 提取公共的css 我们将卡片的公共的css提取到Card.css里 .card{border-radius: 10px;box-shadow: 0 0 10px rgba(0,0,0,0.2); }给盒子的外部添加一个card的类名这样就拥有了card以及原来的类的样式 const NoteBook () {return (Card classNamelogs stylefontSize:12px{addData}/Card); }; 2.9 监听表单的内容变化提交表单 在React中通常表单不需要自行提交而是通过React提交 创建一个监听的事件 // 1. 创建一个响应函数监听表单的变化const descChangeHandler (e) {console.log(e.target.value);inputDate e.target.value;}//2.监听date的变化 const dateChangeHandler (e) {console.log(e.target.value);inputeDate e.target.value}
  给表单添加onChage方法添加监听onChange divlabel htmlFordesc内容/labelinput onChange{descChangeHandler} iddate typetext //divdivlabel htmlFordesc内容/labelinput onChange{descChangeHandler} iddate typetext //div将提交信息赋值将上面监听到信息赋值给变量 let inputDate ; let inputDesc ;监听form的提交给form的添加一个onSubmit的方法监听他的提交 form onSubmit{formSubmitHandler}提交表单取消表单的默认提交刷新的功能将上面赋值的数据拼接成一个对象传递给react const formSubmitHandler (e) {e.preventDefault();const newLog {date:new Date(inputDate),desc: inputDesc} }2.10 使用State保存表单数据(双向绑定) 将上面3的步骤改为State存储数据 const [inputeDate,setInputDate] useState() const [inputeDesc,setInputDesc] useState()将表单的e.target.value 直接传给setInputDesc // 1. 创建一个响应函数监听表单的变化const descChangeHandler (e) {setInputDesc(e.target.value);} 将表单的input里的value改为State的监控对象这样只要值发生了变化就会传递react divlabel htmlFordesc内容/labelinput onChange{descChangeHandler} iddate value{inputeDesc} typetext //divdivlabel htmlFordesc内容/labelinput onChange{descChangeHandler} iddate value{inputeDate} typetext //div当提交结束是将setState的内容清空 const formSubmitHandler (e) {e.preventDefault();const newLog {date:new Date(inputDate),desc: inputDesc}setInputDate( );setInputDesc( ); } 完整代码 import React from react; import Card from ../UI/Cards/Card; import ./LogsForm.css; import { useState } from react;function LogsForm(props) {//1.定义两个表达Stateconst [inputDate,setInputDate] useState();const [inputDesc,setInputDesc] useState();//2.监听表达的input的变化const descChangeHandler (e) {setInputDesc(e.target.value);}//2.监听表达的input的变化 const dateChangeHandler (e) {setInputDate(e.target.value); } //3.监听表单的提交const formSubmitHandler (e) {e.preventDefault();const newLog {date:new Date(inputDate),desc: inputDesc}console.log(newLog);setInputDate();setInputDesc();}return (Card classNamelogs-form{/* 给表单的提交添加一个监听事件 /}form onSubmit{formSubmitHandler}div classNameform-itemlabel htmlFordate日期/label{/ 将表单的value值设置为inputDate */}input onChange{dateChangeHandler} iddate value{inputDate} typedate //divdivlabel htmlFordesc内容/labelinput onChange{descChangeHandler} iddate value{inputDesc} typetext //divdivlabel htmlFortime时长/labelinput idtime typenumber //divdivbutton添加/button/div/form/Card); }export default LogsForm;