TodoList添加列表功能编写

index.js

import React from 'react';         //加载React库
import ReactDOM from 'react-dom';  

import './index.css';
import TodoList from './TodoList';


//ReactDOM会将TodoList组件挂载到页面的DOM节点上，将其渲染到HTML的root标签中
ReactDOM.render(<TodoList />,document.getElementById('root'));

 

TodoList.js

/*
 * @Author: Fliessen
 * @Date: 2020-07-20 09:40:50
 * @LastEditTime: 2020-07-20 16:08:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \todolist\src\todolist.js
 */ 

import React from 'react';   //加载React库
import './TodoList.css';    
 

class TodoList extends React.Component{
  constructor(props){     //组件的构造函数，当TodList组件刚被创建的时候，该方法自动执行
    super(props);         //初始化
    this.state = {        //可以存放数据内容
      List: [],
      inputValue:''       //数据框中的值
    }
  }

  handleBtnClick() {
    this.setState({
      List: [...this.state.List,this.state.inputValue],
      inputValue: ''
    })
    
  }

  handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  }


  //组件中必须有一个render函数，该函数负责组件要显示的内容
  render() { 
    return(       //return出去的内容就是要显示的内容
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}/>

          //将某函数与外层this进行绑定
          <button onClick={this.handleBtnClick.bind(this)}>决定了就是你</button>
        </div>
        <ul>
          {
            //map是对数组做循环的函数
            this.state.List.map((item,index) => { 
              //循环list中的数据，每循环一次就返回一个li标签
              return <li key={index}>{item}</li>   
            })
          }
        </ul>
      </div>
    );
  }
}

export default TodoList;

 

编写思路

一、分块

首先，在render中体现界面，有两大块。

第一块div，搜索框+添加按钮

第二块div，添加的item

先写好HTML框架

二、功能编写步骤

第一步：编写构造函数constructor

               当组件刚被创建的时候，该方法自动执行。

               this.state存放数据内容，inputValue是输入框中输入值

第二步：总体界面框架

              搜索框和添加按钮为其一，添加呈现事项为其二。

              在添加事项的时候不知道会增加多少个，所以不能把li给固定死，所以在<ul>中让其循环呈现li。每循环一次就返回一个li                标签

               map()函数作用是对数组做循环

第三步：点击添加按钮添加事项

（1）<input />

              在输入框中输入数据时，value为输入的值；并且触发onChange事件，调用handleInputChange（）方法，将在输入框中输入的值赋值给inputValue，

（2）<buttom>

              在<button>中添加onClick事件，这里的onClick不是原生事件（C大写了）。onclick才是原生事件。

               点击按钮之后，触发事件执行handleBtnClick（）方法，使得列表中的内容为先前的数据内容再加上inputValue中的数据值，之后将inputValue赋值为空。            

第四步：当将事项增添完毕后搜索框清空

               在handleBtnClick中增加inputValue：' '，使得inputValue值变为空。

               又因为input的value与inputValue的值进行绑定，所以inputValue变化则value变化，input中值发生变化。而handleBtnClick中的inputValue的值变为空，则搜索框中的值变为空。从未达到添加完项目后清空搜索框的目的

 

 

 

 

 

菜鸡一个，才开始学习的旅途，如有问题，希望大家不吝赐教。感谢