最近学习了一小段时间的React，对一些React开发组件的基础有了一点认识，跟着教学视频，自己实现了一个ToDoList组件的功能，今天把做这个组件的过程记录一下，加深学习印象，给同样的前端入门者做一个参考。

 注意:初次配置脚手架会出现禁止运行脚本的错误，解决办法点击：https://www.php.cn/link/e543789a8d5b6a0e6b2f2a804d207e8d

//导入React相关依赖
import React from 'react';

//创建一个组件
class ToDoList extends React.Component{
    //构造函数
    constructor(props){
        super(props);
        //this是父组件（类）的一个实例，实例就类似于java里的一个类，创建了这个类型的一个对象，这个对象就是实例
        this.state = {
            //this.state里可以写一些初始化的数据
        }
    }


    //render渲染虚拟DOM
    render(){

        return(
            <div>
                ToDoList
            </div>
        );
    }

}


//输出组件,使得该组件可以被其他组件调用
export default ToDoList;

 list:[
                {
                    title:'吃饭',
                    checked:true
                },
                {
                    title:'跑步',
                    checked:false
                },
                {
                    title:'上班',
                    checked:false
                },
                {
                    title:'睡觉',
                    checked:true
                },
       ]

 constructor(props){
        super(props);
        //this是父组件（类）的一个实例，实例就类似于java里的一个类，创建了这个类型的一个对象，这个对象就是实例
        this.state = {
            //this.state里可以写一些初始化的数据
            list:[
                {
                    title:'吃饭',
                    checked:true
                },
                {
                    title:'跑步',
                    checked:false
                },
                {
                    title:'上班',
                    checked:false
                },
                {
                    title:'睡觉',
                    checked:true
                },
            ],
        }
    }

    render(){

        return(
            <div>
                 <header>TodoList: 　<input type = "text"/> </header>

                <h2>待办事项</h2>

                <hr />
                
                <ul>
                    {/* 多个li，后面会循环输出 */}
                    <li>
                        <input type="checkbox" /> -- <button>删除</button>
                    </li>
                </ul>           



                <h2>已完成事项</h2>

                <hr />
                <ul>
                    {/* 多个li，后面会循环输出 */}
                    <li>
                        <input type="checkbox"  /> -- <button>删除</button>
                    </li>
                </ul>    
            </div>
        );
    }

import ToDoList from './components/ToDoList';

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import ToDoList from './components/ToDoList';

ReactDOM.render(
  <React.StrictMode>
    {/* 此处是ToDoList组件 */}
    <ToDoList />   
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

<header>TodoList: 　<input type = "text" ref = "inputToDo" onKeyUp = {this.addToDo}/> </header>

    addToDo = (event) => {
        console.log(event.keyCode);
        if(event.keyCode === 13)
        {
            let tempList = this.state.list;
            tempList.push({
                title:this.refs.inputToDo.value,
                checked:false,
            });
            this.setState({
                list:tempList,
            });
            this.refs.inputToDo.value = '';
        }
    }

 this.addToDo = this.addToDo.bind(this);

 <ul>
                    {/* 多个li，后面会循环输出 */}
                    {
                        this.state.list.map((value,index)=>{
　　　　　　　　　　　　　　　　{/*checked为false表示待办*/}
                            if(!value.checked)
                            {
                                return (
                                    <li>
　　　　　　　　　　　　　　　　　　　　　　　　　{/* */}
                                        <input key = {index} type="checkbox" checked = {value.checked} onChange={this.checkboxChange.bind(this,index)}/> {value.title}-- <button>删除</button>
                                    </li>
                                );
                            }

                        })
                    }
 </ul>

<input key = {index} type="checkbox" checked = {value.checked} onChange={this.checkboxChange.bind(this,index)}/> {value.title}-- <button>删除</button>

checkboxChange = (index) => {
      let tempList = this.state.list;
      tempList[index].checked = !tempList[index].checked;
      this.setState({
          list:tempList,
     });
}

 效果：

arrayA.splice(index,n)

  <li>
       <input key = {index} type="checkbox" checked = {value.checked} onChange={this.checkboxChange.bind(this,index)}/> {value.title}
       -- <button onClick={this.removeToDo.bind(this,index)}>删除</button>

 </li>

    removeToDo = (index) => {
        let tempList = this.state.list;
        tempList.splice(index,1);
        this.setState({
            list:tempList,
        });
    }

.list{

  padding: 10px;
}

.list li{

  line-height: 40px;
  margin-left: 30px;
}

.title{

  height: 44px;

  line-height: 44px;

  text-align: center;

  background: #000;

  color:#fff;
}

.title input{

  height: 40px;
}


.container{
  width: 800px;
  height: 1000px;
  margin-left: auto;
  margin-right: auto;
  background-color:  #D0D0D0;
  border: #fff solid 1px;
  border-radius: 5px;
}

.container h2{
  margin-left: 20px;
}

.del-btn {
  float: right;
  margin-right: 30px;
}

import '../assets/index.css';