使用React.js去实现一个toDoList

1.我们新建一个js文件，之后在index.js中去引入

2.在return()中编写我们的html代码
注意：必须有一个<>是完全包裹整个return()中的内容的这是JSX语法所规定的
与Vue对比：在Vue的compoment组件中也要求有一个<>完全去包裹<template>标签中的内容
如果我不想让标签元素去占位置，我们直接使用标签 <Fragment> 这一占位符，包裹在外层即可
记得在这样引入 import React, {Fragment} from ‘react’; 哦~

3.React中的响应式设计思想和事件绑定（进行数据的操作来代替一般的dom）
与Vue对比：都是响应式的框架，都是通过操作数据来操作dom
（1）在constructor(){}中创建数据
TodoList 这个函数就是一个类，我们通过这个类中的constructor函数来在其中写数据

 constructor(props) {
        super(props);
        this.state={} 
    }

（2）在state（状态）中创建我们需要的数据

this.state = {
	inputValue:'';
	list: []
}

需要注意的是一定不要
this.state.变量名=数值
这样直接去修改数据,这样不符合immutable的要求，state在原则上不容许我们做出任何改变
（3）在render()函数中的return()中写我们的JSX代码

   <Fragment>
                <div className="App">
                    {/*如果你在label这里直接写for react会默认为循环 因此要写htmlfor */}
                    <label htmlFor="insertArea">输入内容</label>
                    <input className='input'
                           id="insertArea"
                            value={this.state.inputValue}
                            onChange={this.handleInputChange.bind(this)
                            }
                    />
                    <button onClick={this.handleButtonClick.bind(this)}>提交</button>
                </div>
                <ul>
                    {/*this.handleItemDelete.bind(this,index)指的是给每一个这样的函数
                     添加一个单击响应函数
                     */}
                    {
                        this.state.list.map((item,index)=>{
                            return <li key={index}
                            onClick={this.handleItemDelete.bind(this,index)}
                            >{item}</li>
                            {/*如果不转义添加一个这个 dangerouslySetInnerHTML={{__html:item}}*/}
                     })
                    }
                </ul>
            </Fragment>

要注意为每个标签添加响应函数时都需要加一个.bind(this)来改变单击响应函数的this指向

(4)写各个函数的逻辑代码

  handleInputChange(e) {
            console.log(e.target);
            this.setState({
                inputValue:e.target.value
            });
            }
            /*动态改变input的值，将从input中得到的值传入state中*/

如果想要改变state的值则必须通过this.setState这个方法来实现，在每一个方法中都有
console.log(e.target) 这里打印出来的target 就是获取的节点

 handleButtonClick(e){
        this.setState({
            list: [...this.state.list,this.state.inputValue],
            // ... 扩展运算符的作用将以前的数组展开并生成一个新的数组,然后复制给list进行变化
            inputValue:''
        });
    }

这里最重要的即是这个扩展运算符，将原来的数与新输入的数进行和并
inputValue:’'的作用在于将文本框内的值清除

 handleItemDelete(index){
    // 通过在bind(this,index)多写一个index来传入 经过测试this和index 无法一起传入
        // 有一种东西叫immutable
        // state 不允许我们做任何的改变
        console.log(index);
        const list=[...this.state.list]; // 这句话只是将list拷贝出来
        list.splice(index,1);
        this.setState({
            list:list
        })
    }

这里的扩展的运算符只是起到了将state.list的值传入传入到我们新定义的const list中
之后对数组进行删除操作
在将list传入给setState的list中

芊赋予翔

发布了14 篇原创文章 · 获赞 9 · 访问量 2168

私信关注

使用React.js去实现一个toDoList

猜你喜欢