Skip to main content

moregeek program

#yyds干货盘点# react笔记之学习之存储到一个state对象中-多极客编程

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群

#yyds干货盘点# react笔记之学习之存储到一个state对象中_表单

代码案列

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

const LogsForm = () => {

/*
* 当表单项发生变化时,获取用户输入的内容
* */
// 创建三个变量,用来存储表单中的数据
// let inputDate = '';
// let inputDesc = '';
// let inputTime = 0;

// const [inputDate, setInputDate] = useState('');
// const [inputDesc, setInputDesc] = useState('');
// const [inputTime, setInputTime] = useState('');

// 将表单数据统一到一个state中
const [formData, setFormData] = useState({
inputDate:'',
inputDesc:'',
inputTime:''
});

// 创建一个响应函数,监听日期的变化
const dateChangeHandler = (e) => {
// 获取到当前触发事件的对象
// 事件对象中保存了当前事件触发时的所有信息
// event.target 执行的是触发事件的对象(DOM对象)
//console.log(e.target.value);
// setInputDate(e.target.value);
setFormData({
...formData,
inputDate: e.target.value
});
};

// 监听内容的变化
const descChangeHandler = (e) => {
// 获取到当前触发事件的对象
// 事件对象中保存了当前事件触发时的所有信息
// event.target 执行的是触发事件的对象(DOM对象)
//console.log(e.target.value);
// setInputDesc(e.target.value);

setFormData({
...formData,
inputDesc: e.target.value
});
};

//监听时长的变化
const timeChangeHandler = (e) => {
// 获取到当前触发事件的对象
// 事件对象中保存了当前事件触发时的所有信息
// event.target 执行的是触发事件的对象(DOM对象)
//console.log(e.target.value);
// setInputTime(e.target.value);
setFormData({
...formData,
inputTime: e.target.value
});
};

// 当表单提交时,汇总表单中的数据
/*
* 在React中,通常表单不需要自行提交
* 而是要通过React提交
* */
const formSubmitHandler = (e) => {
// 取消表单的默认行为
e.preventDefault();
// 获取表单项中的数据日期、内容、时长
// 将数据拼装为一个对象
const newLog = {
date: new Date(formData.inputDate),
desc: formData.inputDesc,
time: +formData.inputTime
};

// 清空表单项
setFormData({
inputDate: '',
inputDesc: '',
inputTime: ''
});

console.log(newLog);

/*
* 提交表单后如何清空表单中的旧数据
* 现在这种表单,在React我们称为非受控组件
*
* 我们可以将表单中的数据存储到state中,
* 然后将state设置为表单项value值,
* 这样当表单项发生变化,state会随之变化,
* 反之,state发生变化,表单项也会跟着改变,这种操作我们就称为双向绑定
* 这样一来,表单就成为了一个受控组件
*
*
*
* */

};

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

export default LogsForm;

©著作权归作者所有:来自51CTO博客作者前端歌谣的原创作品,请联系作者获取转载授权,否则将追究法律责任

angular 模块封装概念常见的错误理解-多极客编程

Angular 以类似于 ES 模块的方式引入了模块封装的概念。 它基本上意味着可声明的类型——组件、指令和管道——只能由在该模块内声明的组件使用。 例如,如果我尝试使用下面的代码在 App 模块的 App 组件内使用 A 模块中的 a-comp: @Component({ selector: 'my-app', template: ` Hello {{name}}

canvas 10款基础滤镜(原理篇)-多极客编程

本文简介 点赞 + 关注 + 收藏 = 学会了 <br> 在学习 Canvas 的路上大概率会了解到 滤镜 ,这是个很有趣的东西。 用 Canvas 开发滤镜需要对几何数学、颜色的理解等领域都有一定基础。 但先别关掉文章,没基础也没关系,不是还可以复制粘贴吗?(像极了正则表达式) <br> 我在学习的过程中也尝试过写一些简单的滤镜,也收集过很多滤镜。但由于历史有点久远了,我

#yyds干货盘点#node.js链接mongodb数据库-多极客编程

在这之前确保当前环境下安装了mongodb的模块,且mongodb数据库已经启动,安装mongodb模块到当前目录可以通过yarn add mongodb我此时安装的是v4.1.4版本的mongodb常见的连接方法const { MongoClient } = require('mongodb')const url = "mongodb://localhost:27017"const dbName

#yyds干货盘点# react笔记之学习之双向绑定-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群小结提交表单后如何清空表单中的旧数据 * 现在这种表单,在React我们称为非受控组件 * * 我们可

解决盒约束、widget和assets里的加载资产技术在flutter框架运用的方案【flutter高级技术】-多极客编程

盒约束 flutter: assets: - assets/my_icon.png - assets/background.png 在Flutter中,小部件由其底层RenderBox对象渲染。渲染框受其父对象的约束,并在这些约束下调整自身大小。约束包括最小宽度、最大宽度和高度;尺寸由特定的宽度和高度组成。 通常,根据小部件如何处理其约束,有三种类型的框: 尽可能大。例如,“

#yyds干货盘点# react笔记之学习之完成删除功能-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷代码案例LogItem.jsimport React, { useState, useEffect, useCallback, memo } from 'react';imp

angular 模块封装概念常见的错误理解-多极客编程

Angular 以类似于 ES 模块的方式引入了模块封装的概念。 它基本上意味着可声明的类型——组件、指令和管道——只能由在该模块内声明的组件使用。 例如,如果我尝试使用下面的代码在 App 模块的 App 组件内使用 A 模块中的 a-comp: @Component({ selector: 'my-app', template: ` Hello {{name}}

浅谈 vue3 组件通信-多极客编程

前言 大家好,我是CoderBin,本次又来到了Vue的专题-组件通信。毫无疑问,组件通信是Vue中非常重要的技术之一,它的出现能够使我们非常方便的在不同组件之间进行数据的传递,以达到数据交互的效果。所以,学习组件通信技术是非常有必要的,本文将总结Vue中关于组件通信的八种方式,帮助大家在使用Vue的过程中更加得心应手! 如果文中有不对、疑惑的地方,欢迎在评论区留言指正🌻 一、什么是组件通信 在开

flutter系列之:移动端手势的具体使用-多极客编程

简介 之前我们介绍了GestureDetector的定义和其提供的一些基本的方法,GestureDetector的好处就是可以把任何一个widget都赋予类似button的功能。 今天将会通过几个具体的例子来讲解一下GestureDetector的具体使用。 赋予widget可以点击的功能 一般情况下,我们的普通widget,比如文本是不能进行交互的,但是如果将其用GestureDetector进

#yyds干货盘点# react笔记之学习之双向绑定-多极客编程

前言我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群小结提交表单后如何清空表单中的旧数据 * 现在这种表单,在React我们称为非受控组件 * * 我们可

内科大机器学习框架课程重点内容笔记-多极客编程

一.背景 这是2020届内科大机器学习框架课程的考试复习内容 二.内容 1.变量间的相互关系: (1)确定性关系或函数关系:研究的是确定现象非随机变量间的关系。 (2)相关关系或统计依赖关系:研究的是非确定现象随机变量间的关系。 2.回归分析是研究一个变量关于另一个(些)变量的具体依赖关系。 收入是解释变量或自变量,消费是被解释变量或因变量。 注意:不线性相关并不意味着不相关;有相关关系并不意味着

解决盒约束、widget和assets里的加载资产技术在flutter框架运用的方案【flutter高级技术】-多极客编程

盒约束 flutter: assets: - assets/my_icon.png - assets/background.png 在Flutter中,小部件由其底层RenderBox对象渲染。渲染框受其父对象的约束,并在这些约束下调整自身大小。约束包括最小宽度、最大宽度和高度;尺寸由特定的宽度和高度组成。 通常,根据小部件如何处理其约束,有三种类型的框: 尽可能大。例如,“