（2）React的开发
实例：
import React from 'react';
class TodoList extends React.Component {
constructor(props){
super(props);
this.state = {
list: [
'learn react',
'learn english',
'learn vue'
]
}
}
handleBtnClick() {
this.setState({
list: [...this.state.list, 'hello world']
})
this.state.list.push('hello world');
}
render() {
return (
<div>
<div>
<input/>
<button onClick={this.handleBtnClick.bind(this)}>add</button>
</div>
<ul>
{
this.state.list.map((item) => {
return <li>{item}</li>
})
}
</ul>
</div>
);
}
}
export default TodoList;
新增列表 项功能
import React from 'react';
class TodoList extends React.Component {
constructor(props){
super(props);
this.state = {
list: [
],
inputValue: ''
}
}
handleBtnClick() {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
handleInputChange(e) {
this.setState({
inputValue: e.target.value
})
}
render() {
return (
<div>
<div>
<input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
<button onClick={this.handleBtnClick.bind(this)}>add</button>
</div>
<ul>
{
this.state.list.map((item) => {
return <li>{item}</li>
})
}
</ul>
</div>
);
}
}
export default TodoList;
删除：
import React from 'react';
class TodoList extends React.Component {
constructor(props){
super(props);
this.state = {
list: [
],
inputValue: ''
}
}
handleBtnClick() {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
handleInputChange(e) {
this.setState({
inputValue: e.target.value
})
}
handleItemClick(index) {
const list = [...this.state.list];
list.splice(index, 1);
this.setState({
list: list
})
}
render() {
return (
<div>
<div>
<input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
<button onClick={this.handleBtnClick.bind(this)}>add</button>
</div>
<ul>
{
this.state.list.map((item, index) => {
return <li key={index} onClick={this.handleItemClick.bind(this, index)}>{item}</li>
})
}
</ul>
</div>
);
}
}
export default TodoList;
React中组件
import React from 'react';
import TodoItem from './TodoItem'
class TodoList extends React.Component {
constructor(props){
super(props);
this.state = {
list: [
],
inputValue: ''
}
}
handleBtnClick() {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
handleInputChange(e) {
this.setState({
inputValue: e.target.value
})
}
handleItemClick(index) {
const list = [...this.state.list];
list.splice(index, 1);
this.setState({
list: list
})
}
render() {
return (
<div>
<div>
<input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
<button onClick={this.handleBtnClick.bind(this)}>add</button>
</div>
<ul>
{
this.state.list.map((item, index) => {
return <TodoItem key={index} content={item}/>
})
}
</ul>
</div>
);
}
}
export default TodoList;
import React from 'react';
class TodoItem extends React.Component {
render() {
return (
<div>{this.props.content}</div>
)
}
}
export default TodoItem;
import React from 'react';
import TodoItem from './TodoItem'
class TodoList extends React.Component {
constructor(props){
super(props);
this.state = {
list: [
],
inputValue: ''
}
}
handleBtnClick() {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
handleInputChange(e) {
this.setState({
inputValue: e.target.value
})
}
// handleItemClick(index) {
// const list = [...this.state.list];
// list.splice(index, 1);
// this.setState({
// list: list
// })
// }
handleDelete(index) {
const list = [...this.state.list];
list.splice(index, 1);
this.setState({
list: list
})
}
render() {
return (
<div>
<div>
<input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>
<button onClick={this.handleBtnClick.bind(this)}>add</button>
</div>
<ul>
{
this.state.list.map((item, index) => {
return <TodoItem delete={this.handleDelete.bind(this)} key={index} content={item} index={index}/>
})
}
</ul>
</div>
);
}
}
export default TodoList;
代码优化：
import React from 'react';
import TodoItem from './TodoItem'
class TodoList extends React.Component {
constructor(props){
super(props);
this.state = {
list: [],
inputValue: ''
}
this.handleInputChange = this.handleInputChange.bind(this);
this.handleBtnClick = this.handleBtnClick.bind(this);
this.handleDelete = this.handleDelete.bind(this);
}
handleBtnClick() {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
handleInputChange(e) {
this.setState({
inputValue: e.target.value
})
}
// handleItemClick(index) {
// const list = [...this.state.list];
// list.splice(index, 1);
// this.setState({
// list: list
// })
// }
handleDelete(index) {
const list = [...this.state.list];
list.splice(index, 1);
this.setState({
list: list
})
}
getTodoItems() {
return (
this.state.list.map((item, index) => {
return (
<TodoItem
delete={this.handleDelete}
key={index}
content={item}
index={index}
/>
)
})
)
}
render() {
return (
<div>
<div>
<input value={this.state.inputValue} onChange={this.handleInputChange}/>
<button onClick={this.handleBtnClick}>add</button>
</div>
<ul>{this.getTodoItems()}</ul>
</div>
);
}
}
export default TodoList;
import React from 'react';
class TodoItem extends React.Component {
// 子组件如果想和父组件通信，子组件要调用父组件传递过来的方法
constructor(props) {
super(props);
this.handleDelete = this.handleDelete.bind(this);
}
handleDelete() {
// const { delete, index } = this.props;
// delete(index);
this.props.delete(this.props.index);
console.log(this.props.index)
}
render() {
const { content } = this.props;
return (
<div onClick={this.handleDelete}>{this.props.content}</div>
)
}
}
export default TodoItem;
写css
import React from 'react';
import TodoItem from './TodoItem'
class TodoList extends React.Component {
constructor(props){
super(props);
this.state = {
list: [],
inputValue: ''
}
this.handleInputChange = this.handleInputChange.bind(this);
this.handleBtnClick = this.handleBtnClick.bind(this);
this.handleDelete = this.handleDelete.bind(this);
}
handleBtnClick() {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
handleInputChange(e) {
this.setState({
inputValue: e.target.value
})
}
// handleItemClick(index) {
// const list = [...this.state.list];
// list.splice(index, 1);
// this.setState({
// list: list
// })
// }
handleDelete(index) {
const list = [...this.state.list];
list.splice(index, 1);
this.setState({
list: list
})
}
getTodoItems() {
return (
this.state.list.map((item, index) => {
return (
<TodoItem
delete={this.handleDelete}
key={index}
content={item}
index={index}
/>
)
})
)
}
render() {
return (
<div>
<div>
<input value={this.state.inputValue} onChange={this.handleInputChange}/>
<button className='red-btn' style={{background: 'red', color: '#fff'}} onClick={this.handleBtnClick}>add</button>
</div>
<ul>{this.getTodoItems()}</ul>
</div>
);
}
}
export default TodoList;
有两层：
import React from 'react';
import TodoItem from './TodoItem'
class TodoList extends React.Component {
constructor(props){
super(props);
this.state = {
list: [],
inputValue: ''
}
this.handleInputChange = this.handleInputChange.bind(this);
this.handleBtnClick = this.handleBtnClick.bind(this);
this.handleDelete = this.handleDelete.bind(this);
}
handleBtnClick() {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
handleInputChange(e) {
this.setState({
inputValue: e.target.value
})
}
// handleItemClick(index) {
// const list = [...this.state.list];
// list.splice(index, 1);
// this.setState({
// list: list
// })
// }
handleDelete(index) {
const list = [...this.state.list];
list.splice(index, 1);
this.setState({
list: list
})
}
getTodoItems() {
return (
this.state.list.map((item, index) => {
return (
<TodoItem
delete={this.handleDelete}
key={index}
content={item}
index={index}
/>
)
})
)
}
render() {
return (
<React.Fragment>
<div>
<input value={this.state.inputValue} onChange={this.handleInputChange}/>
<button className='red-btn' onClick={this.handleBtnClick}>add</button>
</div>
<ul>{this.getTodoItems()}</ul>
</React.Fragment>
);
}
}
export default TodoList;
import React,{Component} from 'react';
class TodoItem extends Component {
// 子组件如果想和父组件通信，子组件要调用父组件传递过来的方法
constructor(props) {
super(props);
this.handleDelete = this.handleDelete.bind(this);
}
handleDelete() {
// const { delete, index } = this.props;
// delete(index);
this.props.delete(this.props.index);
console.log(this.props.index)
}
render() {
const { content } = this.props;
return (
<div onClick={this.handleDelete}>{this.props.content}</div>
)
}
}
export default TodoItem;
import React, { Component, Fragment } from 'react';
import TodoItem from './TodoItem'
class TodoList extends Component {
constructor(props){
super(props);
this.state = {
list: [],
inputValue: ''
}
this.handleInputChange = this.handleInputChange.bind(this);
this.handleBtnClick = this.handleBtnClick.bind(this);
this.handleDelete = this.handleDelete.bind(this);
}
handleBtnClick() {
this.setState({
list: [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
handleInputChange(e) {
this.setState({
inputValue: e.target.value
})
}
// handleItemClick(index) {
// const list = [...this.state.list];
// list.splice(index, 1);
// this.setState({
// list: list
// })
// }
handleDelete(index) {
const list = [...this.state.list];
list.splice(index, 1);
this.setState({
list: list
})
}
getTodoItems() {
return (
this.state.list.map((item, index) => {
return (
<TodoItem
delete={this.handleDelete}
key={index}
content={item}
index={index}
/>
)
})
)
}
render() {
return (
<Fragment>
<div>
<input value={this.state.inputValue} onChange={this.handleInputChange}/>
<button className='red-btn' onClick={this.handleBtnClick}>add</button>
</div>
<ul>{this.getTodoItems()}</ul>
</Fragment>
);
}
}
export default TodoList;
.red-btn {
background: red;
color: #fff;
}
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import './style.css'
ReactDOM.render(<TodoList />, document.getElementById('root'));
请点赞！因为你的鼓励是我写作的最大动力！
吹逼交流群：711613774
（2）React的开发的更多相关文章
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- React Native开发入门
目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料 一.前言 虽然只是简单的了解了一下Reac ...
- React阶段开发总结
这次独立编写了React页面主要是数据切换.点击不同的按钮,Ajax请求不同的后台数据.数据驱动表格内容的显示.使用React组件开发. 开发中获得下面的心得: 1.后台给的地址早一点添加路由(写好数 ...
- React Native开发技术周报2
(1).资讯 1.React Native 0.22_rc版本发布 添加了热自动重载功能 (2).技术文章 1.用 React Native 设计的第一个 iOS 应用 我们想为用户设计一款移动端的应 ...
- React Native开发技术周报1
(一).资讯 1.React Native 0.21版本发布,最新版本功能特点,修复的Bug可以看一下已翻译 重要:如果升级 Android 项目到这个版本一定要读! 我们简化了 Android 应用 ...
- DECO 一个REACT NAtive 开发IDE工具
DECO 一个REACT NAtive 开发IDE工具. 目前只支持 OS,NO WINDOWS https://www.decosoftware.com/ 一个方便的快速 ERXPRESS 教程:h ...
- React Native 开发之 (02) 用Sublime 3作为React Native的开发IDE
Sublime Text是一个代码编辑器.也是HTML和散文先进的文本编辑器.漂亮的用户界面和非凡的功能,例如:迷你地图,多选择Python插件,代码段等等.完全可自定义键绑定,菜单和工具栏等等.漂亮 ...
- React Native 开发笔记
ReactNativeDemo 学习ReactNative开发,搭建ReactNative第一个项目 React Native 开发笔记 1.安装Homebrew $ /usr/bin/ruby -e ...
- [转载]Sublime Text 3 搭建 React.js 开发环境
［转载］Sublime Text 3 搭建 React.js 开发环境 Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babe ...
- Webpack+React配合开发
前面两篇关于webpack的基础和进阶,请先务必阅读之前的文章. Webpack教程一 Webpack教程二 什么是React React是一个由Facebook开发的library,它的口号是“A ...
随机推荐
- (三) Docker 常用操作与CentOS7 防火墙命令
参考并感谢 Docker 常用命令 https://docs.docker.com/engine/reference/commandline/docker/ Docker 登录docker账户 doc ...
- js 简单的滑动4
js 简单的滑动教程(四) 作者:Lellansin 转载请标明出处,谢谢 在大概的了解滑动的基本原理和怎么去实现之后,现在我们将更深入的去讨论js的滑动. 相信细心的朋友应该已经发现了,在本教程 ...
- 手写DAO框架（六）-框架使用示例
一.引入pom <dependency> <groupId>me.lovegao</groupId> <artifactId>gdao</arti ...
- Java 之 web服务器—Tomcat
一.服务器 1.服务器 服务器:安装了服务器软件的计算机 2.服务器软件 服务器软件:接收用户的请求,处理请求,做出响应 3.Web 服务器软件 web 服务器软件:接收用户的请求,处理请求,做出响应 ...
- Qt QListWidget
以下代码是 List Widget 添加数据项的代码,一般放在构造函数即可. /*********************添加数据项*********************/ QIcon icon1 ...
- p5.BTC-网络
Bitcoin工作在应用层,网络层是P2P . Bitcoin网络通信的设计原则是 simple robust ,but not efficient. 每个节点维护一个邻居节点的集合,消息传播采取 ...
- curl-手册
Manual -- curl usage explained Related: Man Page FAQ LATEST VERSION You always find news about wha ...
- Spark 宽窄依赖和stage的划分
窄依赖 父RDD和子RDD partition之间的关系是一对一的,或者父RDD一个partition只对应一个子RDD的partition情况下的父RDD和子RDD partition关系是多对一的 ...
- prometheus operator 部署
prometheus operator 部署自定义记录 环境: k8s 1.11集群版本,kubeadm部署 docker 17.3.2版本 Centos 7系统 阿里云服务器 operator 源码 ...
- JVM参数优化（基础篇）
原文:https://www.howardliu.cn/java/jvm-tuning-basic/ 这几天压测预生产环境,发现TPS各种不稳.因为是重构的系统,据说原来的系统在高并发的时候一点问题没 ...