react框架的学习-8-16-2019--循环输出,key, 添加和删除功能

海星吧 2019-8-19 4036

基于上一篇的组件,我们来学习一些其他的东西。


import React, { Component } from 'react'


export default class Value extends Component {

    constructor(props){

        super(props);

        this.state={

            inputValue:'',

            list:[],//添加数组

        }

    }

  render() {

    return (

      <div>

        <div>

          <input 

              value={this.state.inputValue}

              onChange={this.handleInputChange.bind(this)}

          />

          <button onClick={this.handleBtnClick.bind(this)}>提交</button>

        </div>

        <ul>

          {

            this.state.list.map((item,index)=>{//循环输出,es6的map方法

              return (

                <li key={index}  {/*key的值必须是唯一的,在项目中,可以使用id作为唯一标识符*/}

                 onClick={this.handleItemDelete.bind(this,index)}>

                 {item}

                </li>

              )

            })

          }

        </ul>

      </div>

    )

  }

  handleInputChange(e){

    this.setState({

      inputValue:e.target.value

    })

  }

  handleBtnClick(){//添加方法

    this.setState({

      list:[

        ...this.state.list,                        //es6的展开运算符,把之前的数据拼接成一个数组

        this.state.inputValue,            //在点击之后,把inputValue的值复制到数组中

      ],

      inputValue:'',//清空输入框

    })

  }

  handleItemDelete(index){//传入index,删除方法。

    const List = [...this.state.list,]   //这个其实是拷贝state.list的数据,并不是直接指向其中的数据

    List.splice(index,1);                  //使用js方法删除,splice方法会改变原始数组

                                                    //this.state.list.splice(index,1)

                                                    //虽然可以这样写,但是绝对不推荐使用。这样写直接修改了state中的数据,和react的要求不符。

    this.setState({

      list:List,                                  //最后在setState方法中改变list数组的值

    })

    console.log(index)//点击打印index

  }

}



基本上要注意的点都写上面了,大家可以自行复制到项目中看一看。


如果有任何意义上的错误或者你有什么可以补充的知识点欢迎下方留言,

我是海星吧,咱们下一篇见。//或者是另一个身份


弱鸡程序员年底还在加班
最新回复 (2)
  • 欧派兽 2019-8-19
    0 2
    奖励一级精华
    1:管理员给你移区后会显示移到了你之前发帖的区。 2:点击我作为楼主发帖时一楼下的图片签名,可以跳转到站规教程贴。 3:多次水贴水回复会封号哦? 4:不知道回什么的时候就点“里世界专属”,一键随机生成几种回复内容。 5:祝你在里世界玩得愉快!
  • 見失 2019-8-20
    0 3
    大佬大佬
    这个人很懒,什么也没有留下!
    • ACG里世界
      4
          
返回
发新帖