首页 > 其他分享 >React 小案例 列表添加删除功能

React 小案例 列表添加删除功能

时间:2023-01-03 15:37:21浏览次数:51  
标签:index 代码 list 列表 React state 添加 复制 组件


所有代码

import React,{Component,Fragment} from 'react'

class TodoList extends Component{
constructor(props){
super(props);
this.state = {
list:[
'learn react',
'learn english',
'learn vue'
],
inputValue:''
}
}
handleBtnCilck(){
this.setState({
list:[...this.state.list, this.state.inputValue],
inputValue:''
})
}
handleInputChange(e){
this.setState({
inputValue:e.target.value,
})
}
handleItemClick(index){
//console.log(index);
const list = [...this.state.list];
list.splice(index,1);
this.setState({
list:list
})
}
render(){
return(
<Fragment>
<input onChange={this.handleInputChange.bind(this)}
value={this.state.inputValue}
/>
<button onClick={this.handleBtnCilck.bind(this)} className="add">添加</button>
<ul>
{
this.state.list.map((item,index)=>{
return <li className="list" key={index}>{item}
<span style={{marginLeft:"20px"}}
onClick={this.handleItemClick.bind(this,index)}
className="delete"
>删除</span>
</li>
})
}
</ul>
</Fragment>
)
}
}
export default TodoList复制代码

 

注意点:

【this指向问题】

1.标签事件绑定中,事件名前面的this,指向整个全局组件

<button onClick={this.handleBtnCilck.bind(this)} className="add">添加</button>复制代码

2.而在当前组件事件函数中this指向当前函数,所以如果函数中需要用到全局的state数据,就需要将函数中的this变成全局的this,this.handleBtnCilck.bind(this)

handleInputChange(e){
this.setState({
inputValue:e.target.value,
})
}复制代码

 

【render渲染的根标签问题】

1.render下只能渲染一个根标签,div,但是外层套一层div属于冗余代码,我们可以将其替换为<Fragment>标签,同时在上方记得引入Fragment

import React,{Component,Fragment} from 'react'复制代码

2.也可将Component,同时简化此处的代码:

class TodoList extends Component{}复制代码

 

【遍历渲染的key值,不能重复】

<li className="list" key={index}>{item}>复制代码

要遍历哪个标签,就return哪个标签

 

【遍历方法】

1.list是要遍历的数组数据

 

{
this.state.list.map((item,index)=>{
return <li className="list" key={index}>{item}</li>
})
}复制代码

 

【父子传值问题】

1.父组件通过给子组件标签上添加属性传参给子组件,子组件通过props接收父组件传递过来的参数;

父:

<CommentBox commentsLength={comments.length}/>复制代码

子:

<p>已有{this.props.commentsLength}条评论</p>复制代码

 

2.子给父传,是调用父组件传来的方法,将内容作为参数传出

父组件:

addComment(comment111){
this.setState({
comments:[...this.state.comments,comment111]
})
}
<CommentBox onAddComment={this.addComment}/>复制代码

子组件携带参数传给父组件:

handleSubmit(event){
this.props.onAddComment(this.textInput.value)
}复制代码

最终效果:

 

 

标签:index,代码,list,列表,React,state,添加,复制,组件
From: https://blog.51cto.com/u_12422954/5986015

相关文章

  • react高阶组件
    1.首先介绍高阶函数基本概念:函数可以作为参数被传递:函数可以作为返回值输出: 2.高阶组件组件作为参数被传递,返回值是一个组件高阶组件是一个函数案例:将A组件作为公共组件,BC......
  • git使用添加分支,合并分支,回滚
    git添加分支然后push新的分支切换到添加的分支上修改代码不影响master上的代码修改代码如下,添加一行注释commit到本地如果出现错误可以本地回滚然后push到远程仓......
  • react Redux 用Redux中央仓库实现一个todolist
     Redux简单介绍Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用(SPA)开发日趋复杂,JavaScript需要管理比任何时候都要多的state(状态),Re......
  • React 小案例 无线首页底部导航组件
    效果:底部页面导航点击当前图标图标高亮页面结构1.将所用到的小图标文件放置在static文件夹下2.在src下新建tabbar文件夹,用于存放组件资源3.页面代码注意:将本页面的css引入......
  • React 小案例 路由跳转
    在上篇的基础上做路由跳转:​​上篇​​安装路由及代码:安装:cnpmi-Sreact-router-dom1.在pages里创建四个跳转页面 2.在src文件夹下创建router.js,router.js全部内容:首先引......
  • React 中用jQuery的ajax 和 axios请求数据
    目录结构 单页文件Records.js模拟一个mock数据:1.https://www.mockapi.io/ 可以使用github账号登陆2.新建项目3.我在此命名项目为accunt-app4.填写你数据的名字5.数据的......
  • react 基础 脚手架组件挂载 / 生命周期
    脚手架里的index.js配置组件的挂载importReactfrom'react'importReactDOMfrom'react-dom'//importLifefrom'./Life'importXiaojiejiefrom'./react/Xiaojiejie'......
  • React 小案例 用户评论
    功能展示:1.用户可输入用户名2.输入评论内容3.点击发布4.用户名和用户评论会被显示在列表里,第一个评论在最上面5.且显示本条评论离现在过去了多长时间6.鼠标放在事件上方可......
  • React 用axios 获取遍历json 引入swiper轮播图
    结构展示:功能展示:1.使用swiper轮播插件,2.自动轮播,当前图片高亮小按钮首先引入swiper和配置环境1.npminstall--saveswiper2.在src文件夹index.js下引入样式,避免打包失败im......
  • 记录报错 react Expected an assignment or function call and instead saw an expres
    报错:Expectedanassignmentorfunctioncallandinsteadsawanexpression no-unused-expressionsSearchforthekeywordstolearnmoreabouteacherror.期望一......