后端开发学React - 3 简单数据操作及事件绑定

这节通过简单的一个小应用来实现简单数据操作及事件绑定

1. 功能：英超球队注册
   1. 初始化已经注册列表
   2. 输入球队名称，点击按钮进行注册到下方列表
   3. 双击删除已添加球队
2. 步骤：
   1. 已有列表的初始化
   2. input的数据绑定
   3. 注册球队按钮事件绑定
   4. 事件中改变React中初始化的值
   5. 改造已有球队列表的数据进行初始化和一个扩展（这里用到了es6的语法）
3. 知识点：
   1. 通过构造函数初始化数据
   2. 将函数中的数据与dom中数据绑定
   3. 绑定事件
   4. 修改绑定数据
   5. 操作数组

3.1 文件准备

• index.js

import React from 'react'
import ReactDOM from 'react-dom'
import PremierLeagueRegister from './PremierLeagueRegister'


ReactDOM.render(<PremierLeagueRegister />,document.getElementById('root'))

• PremierLeagueRegister.js

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

class PremierLeagueRegister extends Component{
    render(){
        return(
            <Fragment>
                <input /><button>注册球队</button>
                <ul>
                    <li>曼城</li>
                    <li>切尔西</li>
                </ul>
            </Fragment>
        )
    }
}

export default PremierLeagueRegister

3.2 数据绑定

1. 添加构造函数
   1. 固定继承父类构造函数super(props)
   2. 通过state，进行初始化值
2. 修改render() 中的 <input> 为<input value={this.state.inputValue} /> 进行数据绑定

import React, { Component, Fragment } from 'react'
class PremierLeagueRegister extends Component {
    constructor(props) {
        super(props) //调用父类的构造函数，固定写法
        this.state = {
            inputValue: '' // input中的值
        }
    }
    render() {
        return (
            <Fragment>
                <input value={this.state.inputValue} /> 
                <button>注册球队</button>
                <ul>
                    <li>曼城</li>
                    <li>切尔西</li>
                </ul>
            </Fragment>
        )
    }
}
export default PremierLeagueRegister

3.3 事件绑定&数据修改

上面代码在修改input的时候是没有数据变化的，因为强制绑定了inputValue 的值。想改变的话需要绑定一个onchange 事件。
同理，按钮也需要做同样的绑定

1. input的onchange事件绑定

<input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />

inputChange(e){
    console.log(e.target.value);
    this.setState({
        inputValue:e.target.value
    })
}

ps：React 中改变值需要使用this.setState

3.3 列表数据化

1. 初始化列表
2. 绑定onclick事件
3. 对list进行循环
4. 通过this.setState()对绑定的变量进行修改

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

class PremierLeagueRegister extends Component {
    constructor(props) {
        super(props) 
        this.state = {
            inputValue: '', 
            list:['曼城','切尔西']  //1. 首先初始化列表
        }
    }
    render() {
        return (
            <Fragment>
                <input value={this.state.inputValue} onChange={this.inputChange.bind(this)}/> 
                {/*2. 绑定onclick事件*/}
                <button onClick={this.addList.bind(this)}>注册球队</button>
                <ul>
                    {
                        //3. 对list进行循环，类似java8中的流操作
                        this.state.list.map(
                            (item,index)=>{
                            //注意：这个地方的key如果不填写控制台会爆红
                            return <li key={index+item}>{item}</li>
                            }
                        )
                    }
                </ul>
            </Fragment>
        )
    }
    inputChange(e){
        this.setState(
            {
                inputValue:e.target.value
            }
        )
    }
    addList(e){
        //4. 通过this.setState()对绑定的变量进行修改
        this.setState({
            //这里用了es6中的一个新语法，扩展运算符
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })
    }
}

export default PremierLeagueRegister

3.4 删除数据

1. 绑定删除方法，并传递数组角标

<ul>
    {
        this.state.list.map((item,index)=>{
            return (
                <li 
                    key={index+item}
                    onClick={this.deleteItem.bind(this,index)}
                >
                    {item}
                </li>
            )
        })
    }
</ul>  

2. 编写删除方法
   1. let定义局部变量list（es6语法：区别var和const）
   2. 根据元素删除list元素，然后赋值给state中的list

//删除单项服务
deleteItem(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
        list:list
    })
}

React禁止直接操作state，虽然不报错，但是后期性能优化会有很多麻烦：所以不能这么写：this.state.list.splice(index,1)

本文地址：https://blog.csdn.net/qq919694688/article/details/107536400