reac实现ToodList

Node >= 10.16 和 npm >= 5.6
npx create-react-app 项目名称创建react脚手架

渲染组件

import React from 'react';
import ReactDOM from 'react-dom';import ToodList from './ToodList'ReactDOM.render(<React.StrictMode><ToodList /></React.StrictMode>,document.getElementById('root')
);

import React, { Fragment } from "react";
import './tood.css'class ToodList extends React.Component {// 组件创建一瞬间执行constructor(props){// 传递给Component的构造函数super(props);this.handleInputChange = this.handleInputChange.bind(this)this.handleKeyUp = this.handleKeyUp.bind(this)this.state = {inputValue: '',list: []}}handleInputChange(e){this.setState({inputValue : e.target.value})}handleKeyUp(e){if(e.target.value.trim() === ''){alert('输入内容不能为空')return}if(e.keyCode === 13){const list = [...this.state.list, this.state.inputValue]this.setState({list,inputValue: ''})}
}getListItems(){return this.state.list.map((val, index) => {return (<li key={index}onClick={this.handleItemClick.bind(this,index)}dangerouslySetInnerHTML={{__html: val}}></li>)} )
}handleItemClick(index) {const list = [...this.state.list]// 如果仅删除一个元素，则返回一个删除后的元素的数组。 如果未删除任何元素，则返回空数组。// （删除元素的索引，多少项）list.splice(index, 1)this.setState({list})
}render() {return (// 占位符<Fragment>{/* 这是一个lable */}<label htmlFor='myinput'>请输入内容：</label><input value={this.state.inputValue} onChange={this.handleInputChange}onKeyUp={this.handleKeyUp}className='input'id='myinput'/><ul>{this.getListItems()}</ul></Fragment>);}
}export default ToodList;

reac实现ToodList相关推荐

reac初学者-简介与入门
reac初学者-简介与入门一.react简介二.react的特点三.基本使用一.简介 react是用于构建用户界面的JavaScript库(只关注view)由Facebook开源二.reac ...
reac——父组件向子组件传递值，子组件何时能同步获得父组件改变后的值
//这里是父组件的代码:export default class HeaderCom_son extends React.Component {constructor(props) {super(pr ...
选择 ReactJS 的五大理由
ReactJS是一个开源的JavaScript库,并且由Facebook和Instagram这样的顶尖IT企业以及开发者社区所维护.该框架广泛使用于为web应用程序开发用户界面的时候.这个特殊的框架被 ...
reac antd 删除列表
给个点击事件 <span className={styles.delete} onClick={() => this.ondelete(item.key)}> 用过滤器 ondele ...
Reac生命周期钩子之getSnapshotBeforeUpdate
点击+1时候: 如果我们在getSnapshotBeforeUpdate钩子里返回null,控制台就不会报错了. 那么什么是快照值snapshot value呢?字符串,数组,数字,对象,函数,都可以 ...
React源码分析（二）= Reac初次渲染分析
文章目录 1. render阶段 legacyRenderSubtreeIntoContainer 1.1. legacyCreateRootFromDOMContainer 1.1.1. React ...
reac笔记_13 form表单元素中 input/defaultValue + useState/useRef
目录原生html元素 input属性示例1 示例2 react中受控组件与非受控组件属性 error - input标签value属性使用示例 - useState 示例 - input标签 ...
【第0篇】从0-1自建个人博客系统【web端，admin管理端，express后端，Nginx部署】--vue3技术 reac+hook技术 umi4
[第0篇]从0-1自建个人博客系统[web端,admin管理端,后端] 文章完整地址:http://huxunxun.top/lookArtical?artical_id=18 [序言] 我是一个微小 ...
reac学习之路（一）组件之前的传值
近期对于react比较感兴趣因为最近想要换工作投递简历的时候发现一些高薪的或者大点的公司对于react的应用更多点所以往后就抽点时间把react在看看之前也有学过但是好多年没有用了都忘记 ...

reac实现ToodList

reac实现ToodList相关推荐

最新文章

热门文章