（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 ...
随机推荐
- CORS讲解
跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源.当一个资源从与该资 ...
- Windows server 2012 R2下安装sharepoint2013
• 安装windows server 2012 R2 系统,配置IP.系统打补丁,修改主机名.加域后重启.• 安装WEB服务器,勾选windows身份验证 • 安装应用程序服务器 • 安装.NET F ...
- Java调用WebService方法总结(5)--Axis2调用WebService
Axis2是新一点Axis,基于新的体系结构进行了全新编写,有更强的灵活性并可扩展到新的体系结构.文中demo所使用到的软件版本:Java 1.8.0_191.Axis2 1.7.9. 1.准备 参考 ...
- C++线程同步之临界区
#include <iostream> #include <windows.h> using namespace std; CRITICAL_SECTION cs; // Lo ...
- 通过 Web Deploy 发布的配置
罩着别人的配置弄了一下午,死活认证通不过,后来好不容易试出来,备忘. 服务端:安装IIS,启动管理程序,安装Web Deploy, 建立网站,建立IIS用户,进网站的权限管理里面给IIS用户授权. V ...
- 尚硅谷韩顺平Linux教程学习笔记
目录 尚硅谷韩顺平Linux教程学习笔记 写在前面 虚拟机 Linux目录结构 远程登录Linux系统 vi和vim编辑器 关机.重启和用户登录注销 用户管理 实用指令 组管理和权限管理 定时任务调度 ...
- git/github安装与使用教程
新学习了Git和GitHub的使用,记一下笔记,也希望可以帮助他人,这里只是初级阶段,以后还会不断的修改和完善. 1.什么是git 开源的分布式版本控制系统,与svn比独特的地方: 1.解决了svn后 ...
- python之PEP8规范
比较需要注意的 缩进 每一级缩进使用4个空格. 续行应该与其包裹元素对齐,要么使用圆括号.方括号和花括号内的隐式行连接来垂直对齐,要么使用挂行缩进对齐3.当使用挂行缩进时,应该考虑到第一行不应该有参数 ...
- git 在本地备份与指定不需要管理文件
git 在本地备份 备份文件夹操作 在本地备份文件夹克隆一个不带工作区的仓库: 哑协议: git clone --bare <workspace>/.git yourwork.git gi ...
- Problem E: 数量的类模板
#include<iostream> #include<iomanip> #include<algorithm> using namespace std; temp ...