（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 ...
随机推荐
- 环境配置--升级Python 3.6爬坑
升级到3.6之后,发现ctrl alt t呼不出命令台,找了半天发现update manager也打不开,而且没有错误报告.....查阅了一番资料看到有人有类似的问题(https://askubunt ...
- JavaNetty心跳监控
import java.net.InetAddress; import java.net.UnknownHostException; import java.util.Map; import java ...
- ByteBuf源码
ByteBuf是顶层的抽象类,定义了用于传输数据的ByteBuf需要的方法和属性. AbstractByteBuf 直接继承ByteBuf,一些公共属性和方法的公共逻辑会在这里定义.例如虽然不同性质的 ...
- java 堆 排序学习
/** * <html> * <body> * <P> Copyright 1994 JsonInternational</p> * <p> ...
- Windows10如何卸载OneDrive
Windows10如何卸载OneDrive 来源 https://zhuanlan.zhihu.com/p/23985905 1) 禁止onedrive自启动简单的就是在任务管理器的启动中禁用oned ...
- RestFramework之序列化器源码解析
一.源码解析之序列化: 1.当视图类进行实例化序列化类做了如下操作: #ModelSerializer继承Serializer再继承BaseSerializer(此类定义实例化方法) #在BaseSe ...
- gitlab异地备份并验证MD5值
最近公司发生了蛮多事情的,唉,咱也不管问啊,好好干活吧 需求 把gitlab的备份文件异地备份一份,备份无论失败还是成功通知某邮箱 实现思路 先rsync文件过去,判断rsync这个步骤有没有成功,失 ...
- 如何使用API的方式消费SAP Commerce Cloud的订单服务
最近Jerry在做一个微信和SAP Commerce Cloud集成的项目,需要在微信里调用后者的Restful API进行订单创建和读取.以前Jerry对SAP Commerce Cloud知之甚少 ...
- 【JUC】4.Synchronized与ReentrantLock对比
与synchronized相同,ReentrantLock也是一种互斥锁: synchronized与ReentrantLock的对比: 都是可重入锁 可以再次获取自己的内部锁,即:一个线程获取某对象 ...
- postgressql启动与关闭
POSTGRESSQL启动和停止数据库可以通过service方式 .POSTGRESSQL的命令行工具进行启动与停止. 1.使有SERVICE方式 启动数据库服务的命令如下·: #service po ...