React中的类组件、函数式组件、JSX语法、数据驱动的设计思想和事件绑定、TodoList功能等
时间:2020-04-12
本文章向大家介绍React中的类组件、函数式组件、JSX语法、数据驱动的设计思想和事件绑定、TodoList功能等,主要包括React中的类组件、函数式组件、JSX语法、数据驱动的设计思想和事件绑定、TodoList功能等使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
什么是 JSX 语法
JSX语法里,有两种类型的标签:
1、普通的html标签(首字母小写)
2、组件标签(首字母大写)
使用 React 编写 TodoList 功能
src/TodoList.js
import React,{Fragment} from 'react'; function TodoList() { return ( <Fragment> <input type="text" /> <ul> <li>learn react</li> <li>learn components</li> </ul> </Fragment> ); } export default TodoList;
scr/index.js中引入TodoList组件
React 中数据驱动的设计思想和事件绑定
react组件分为函数组件和类组件,上面用的都是函数组件,现在使用类组件的state和setState来完成
修改src/TodoList.js
import React,{Component,Fragment} from 'react'; class TodoList extends Component { constructor(props) { super(props); this.state = { inputVal:'hello,cyy', list:[] }; } changeVal(e){ this.setState({ inputVal: e.target.value }); } render(){ return ( <Fragment> <input type="text" value={this.state.inputVal} onChange={this.changeVal.bind(this)} /> <button>添加</button> <ul> <li>learn react</li> <li>learn components</li> </ul> </Fragment> ); } } export default TodoList;
实现 TodoList 新增删除功能
修改src/TodoList.js
import React,{Component,Fragment} from 'react'; class TodoList extends Component { constructor(props) { super(props); this.state = { inputVal:'', list:[] }; } changeVal(e){ this.setState({ inputVal: e.target.value }); } addItem(e){ //按下回车键 if(e.keyCode===13){ const list=[...this.state.list,e.target.value] this.setState({ //list:list //对象的键值相同时,简写 list, inputVal:'' }) } } deleteItem(index){ const list=[...this.state.list]; list.splice(index,1);//从数组中删除指定index的数据 this.setState({ list }) } render(){ return ( <Fragment> <input type="text" value={this.state.inputVal} onChange={this.changeVal.bind(this)} onKeyUp={this.addItem.bind(this)} /> <ul> { this.state.list.map((item,index)=>{ return <li key={index} onClick={this.deleteItem.bind(this,index)}>{item}</li> }) } </ul> </Fragment> ); } } export default TodoList;
效果图
更多 JSX 语法细节
修改TodoList.js,对代码进行优化
1、函数每次执行时都要bind(this)改变指向,可以在constructor中写,只执行一次
(绑定参数的函数不能这样操作,只能在每次生成时执行)
2、将循环的部分单独抽离成一个函数
3、添加style样式(样式属性为className,而不是class)
4、使用label的for,需要使用htmlFor
5、JSX的注释方法:{/* */},不在JSX标签内的可以使用 js 注释 //
6、对空内容进行处理,不添加
7、带有html标签的内容不要转义,使用dangerouslySetInnerHTML={{ __html: value }}
修改前
修改后
import React,{Component,Fragment} from 'react'; import './style.css'; class TodoList extends Component { constructor(props) { super(props); this.state = { inputVal:'', list:[] }; this.changeVal=this.changeVal.bind(this); this.addItem=this.addItem.bind(this); } changeVal(e){ this.setState({ inputVal: e.target.value }); } addItem(e){ //按下回车键 if(e.keyCode===13 && e.target.value!==""){ const list=[...this.state.list,e.target.value] this.setState({ //list:list //对象的键值相同时,简写 list, inputVal:'' }) } } deleteItem(index){ const list=[...this.state.list]; list.splice(index,1);//从数组中删除指定index的数据 this.setState({ list }) } getList(){ return this.state.list.map((item,index)=>{ return <li key={index} onClick={this.deleteItem.bind(this,index)} dangerouslySetInnerHTML={{__html:item}}></li> }) } render(){ // 这是JS中的注释 return ( <Fragment> {/* 这是JSX中的注释 */} <label htmlFor="input">请输入内容:</label> <input type="text" id="input" className="input" value={this.state.inputVal} onChange={this.changeVal} onKeyUp={this.addItem} /> <ul>{this.getList()}</ul> </Fragment> ); } } export default TodoList;
最后,组件分为类组件和函数式组件,上面我们使用的是类组件,可以使用函数式组件来改写
import React,{Fragment,useState} from 'react'; function TodoList2() { const [inputVal, setInput] = useState(''); const [list, setList] = useState([]); const changeVal=e=>{ setInput(e.target.value); } const addItem=e=>{ //按下回车键 if(e.keyCode===13 && e.target.value!==""){ const list2=[...list,e.target.value] setList(list2); setInput(''); } } const deleteItem=index=>{ const list2=[...list]; list2.splice(index,1);//从数组中删除指定index的数据 setList(list2); } const getList=()=>{ return list.map((item,index)=>{ return <li key={index} onClick={deleteItem} dangerouslySetInnerHTML={{__html:item}}></li> }) } return ( <Fragment> {/* 这是JSX中的注释 */} <label htmlFor="input">请输入内容:</label> <input type="text" id="input" value={inputVal} onChange={changeVal} onKeyUp={addItem} /> <ul>{getList()}</ul> </Fragment> ); } export default TodoList2;
原文地址:https://www.cnblogs.com/chenyingying0/p/12687521.html
- salesforce零基础学习(八十六)Ajax Toolkit (VF页面中使用及javascript action使用)
- salesforce零基础学习(八十五)streaming api 简单使用(接近实时获取你需要跟踪的数据的更新消息状态)
- 深入nDPI
- 44个Java代码性能优化总结
- 干货:Java正确获取客户端真实IP方法整理
- sublime学习笔记
- Java程序员必须掌握的常用Linux命令。
- SAMP论文学习
- IEEE Trans 2009 Stagewise Weak Gradient Pursuits论文学习
- async和enterproxy控制并发数量
- 从零开始写项目终极【维护网站、修复Bug】
- Redis 数据结构与内存管理策略(下)
- Redis 数据结构与内存管理策略(上)
- Servlet第三篇【request和response简介、response的常见应用】
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ThreadLocal企业中真实应用
- python第五十二课--自定义异常类
- python第五十三课——time模块
- 从亲身经历谈谈如何用Git分支解决项目生产实践中的痛点
- mysql数据库基础命令(一)
- Linux系统Logrotate服务介绍
- python五十四课——datetime模块
- python五十五课——calendar模块
- python五十六课——正则表达式(常用函数之match)
- python五十六课——正则表达式(常用函数之search())
- python五十六课——正则表达式(常用函数之findall)
- python五十七课——正则表达式(元字符)
- python五十七课——正则表达式(边界字符)
- python五十七课——正则表达式(多个字符)
- python五十八课——正则表达式(分组)