如何用react做增删

如何用react做增删

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

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
         }
     });
 }

更多React相关技术文章，请访问React答疑栏目进行学习！

以上就是如何用react做增删的详细内容，更多请关注易知道|edz.cc其它相关文章！