（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 ...
随机推荐
- 【1】BIO与NIO、AIO的区别
一.BIO 在JDK1.4出来之前,我们建立网络连接的时候采用BIO模式,需要先在服务端启动一个ServerSocket,然后在客户端启动Socket来对服务端进行通信,默认情况下服务端需要对每个请求 ...
- CLASSPATH 环境变量设置
当 JVM 运行时,如果设置了 CLASSPATH 变量,那么 JVM 会到该目录下寻找 java 类文件 该变量配置的方式不同,寻找顺序也不同 在我的 D:\tmp\java\quickstart\ ...
- 【洛谷 P3804】 【模板】后缀自动机
题目链接 #include <cstdio> #include <cstring> #include <algorithm> using namespace std ...
- 心知天气数据API 产品的高并发实践
心知天气数据API 产品的高并发实践 心知天气作为国内领先的商业气象服务提供商,天气数据API 产品从公司创立以来就一直扮演着很重要的角色.2009 年API 产品初次上线,历经十年,我们不断用心迭代 ...
- vs code 调试设置
首先vs code 安装插件:Debugger for Chrome vscode 设置:点击调试按钮,然后调试面板界面再点击设置按钮,添加一个配置,选择环境为:chrome编辑器自动生成一个laun ...
- Android 设置横屏
以下介绍两种方式 1.1 设置清单文件 <activity android:name=".MainActivity" android:screenOrientation=&q ...
- SAP开源的持续集成-持续交付的解决方案
SAP开源的持续集成/持续交付的解决方案: (1) 一个叫做piper的github项目,包含一个针对Jenkins的共享库和一个方便大家快速搭建CI/CD环境的Docker镜像: (2) 一套SAP ...
- 关于maven中版本控制问题
之前我们说过Maven的版本分为快照和稳定版本,快照版本使用在开发的过程中,方便于团队内部交流学习.而所说的稳定版本,理想状态下是项目到了某个比较稳定的状态,这个稳定包含了源代码和构建都要稳定. ma ...
- 《Clean Code》读书笔记——第二周
本周我阅读了<Clean Code>. “神在细节中!”,建筑家范德罗如是说.他当然专注于基于宏伟构架之上的永恒建筑形式,他也同样为自己设计的建筑挑选门把手.同样软件开发也是这样,小处见大 ...
- 转 Python3 ssl模块不可用的问题
编译安装完Python3之后,使用pip来安装python库,发现了如下报错: $ pip install numpy pip is configured with locations tha ...