菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
81
0

如何用react做增删

原创
05/13 14:22
阅读数 688

如何用react做增删

1、使用react做一个输入框,点击提交在下面列表展示,点击对应的列表项,删除该项,如下:

Snipaste_2019-12-20_13-43-24.jpg

2、项目的数据结构,首先分析需求,一个input框,一个button,一个列表。可以把input和button看成一个组件,列表看成一个组件。在state中的数据结构可以设置为:

//state的数据结构
 this.state = {
 inputValue: '', //用于存放input的值
 list: []     //存放列表的值
}

input框功能实现,原理:input框绑定onChange事件,每当输入字符时,改变this.state.inputValue的值,React中当state或props中的值改变,render函数会重新执行。实现如下:

 //方法一:改变this.state.inputValue值,通过事件返回的e.target.value,获取输入框中的值
 <input type="text" onChange={this.handleChange} value={this.state.inputValue} />
 handleChange (e) {
     //同步setState
     this.setState({
         inputValue: e.target.value
     });
 }
 //方法二:在input框上设置ref属性,ref表示对组件真正实例的引用。
 //设置ref={(input) => {this.input = input}}表示,将当前input框中的value值,
 //绑定到this上,在handleChange方法中,便可以直接取input的值:this.input.value
 <input type="text"
        id="inputValue"
        onChange={this.handleChange}
        value={this.state.inputValue}
        ref={(input) => {this.input = input}}
 />
 handleChange (e) {
     const value = this.input.value;
     //异步setState,可以为异步方法,带有一个参数prevState,即为上一步state的内容,同时带有回调函数
     this.setState(() => ({
         inputValue: value
     }), () => {
         console.log('赋值完成!');
     });
 }

提交功能实现,原理:很容易就想到,当点击提交的时候,将input框中的值push到this.state.list即可。

<button onClick={this.handleSubmit}>提交</button>
 //提交添加UI列表
 handleSubmit () {
     this.setState((prevState) => ({
         list: [...prevState.list, prevState.inputValue],
         inputValue: ''
     }), () => { //回调函数
         console.log(this.ul.querySelectorAll('li').length);
     });
 }

将list的值在页面展示出来,可以通过map方法,循环li。

 this.state.list.map((item, index) => {
     return <li key={index}>{item}</li>
 })
 /*
     注:react中循环的时候,必须在每一项加上key的属性,不然控制台会报错,
     原因是:diff算法在循环的时候,会去匹配对应的key值。此处用index作为key值是不合理的做法,key值应该是唯一的,
     diff算法后面会详细讲到。
 */

点击li,删除当前li,原理:每一个li都有对应的index,点击li时,获取index,在list找到对应下标,然后delete即可。

 this.state.list.map((item, index) => {
     return <li key={index} onClick={this.handleDeleteItem.bind(this, index)}>{item}</li>
 })
 //删除当前点击item
 handleDelete (index) {
     this.setState((prevState) => {
         const list = [...prevState.list];
         list.splice(index, 1);
         return {
             list: list
         }
     });
 }

发表评论

0/200
81 点赞
0 评论
收藏
为你推荐 换一批