（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 ...
随机推荐
- c# 操作xml文件（读写）
根据项目需求,我们需要记录用户的操作痕迹,当用户下次登录操作同一个文件时,页面显示为用户上一次执行的用户轨迹,我们考虑把用户的历史记录写进xml文件中. 存储的xml数据结构: XML操作类: usi ...
- C#判断字符串中包含某个字符的个数
//定义字符串 var Email= "humakesdkj@idsk@"; //获取@字符出现的次数 int num = Regex.Matches(Email, "@ ...
- kubernetes第二章--集群搭建
- 常见SVN图标的含义
转自:https://www.cnblogs.com/genhaosan/articles/5129791.html 灰色向右箭头:本地修改过 蓝色向左箭头:SVN上修改过 灰色向右且中间有个加号的箭 ...
- 造成thrift 编译构建项目失败的原因之一：thrift环境变量没设置
由于重装了系统和IDEA工具,打开原项目时使用install 构建使用thrift 协议的项目时失败.下面是说说我遇到的问题 看下图,就是构建时控制台输出的日志,因为是乱码,当时没重视,就先去检查po ...
- SAP ABAP的CI/CD解决方案
如今国外很多partners已经在尝试Jenkins + abapGit + 公有云搭建ABAP CI/CD环境了.ABAP系统的改动通过abapGit提交,触发Jenkins上部署的命令行脚本,脚本 ...
- python 解析命令行选项
问题: 程序如何能够解析命令行选项 解决方案 argparse 模块可被用来解析命令行选项 argparse 模块 argparse 模块是标准库中最大的模块之一,拥有大量的配置选项 dest 参数指 ...
- ORACLE 清理SYSAUX表空间
在数据库检查中发现SYSAUX表空间占用过大,SYSAUX是ORACLE10G开始提供的功能,用于数据库为SYSTEM表空间减负. 用以下语句查出相应的表空间值 select a.tablespace ...
- IDEA设置项目文件自动Add到Svn/Git
1)配置自动Add 2)将未添加的文件添加到本地 3)取消已经添加的文件
- Android笔记（四十六） Android中的数据存储——XML（二）PULL解析
PULL 的工作原理: XML pull提供了开始元素和结束元素.当某个元素开始时,可以调用parser．nextText()从XML文档中提取所有字符数据.当解析到一个文档结束时,自动生成EndDo ...