React 编写TodoList功能

一、TodoList实现列表添加删除功能

添加webpack命令: yarn add webpack

创建components 目录及TodoList.js

pages 目录创建 show用来渲染TodoList组件

TodoList.js 代码

import React,{ Component } from 'react';
//Fragment 隐藏外层标签
class TodoList extends Component{
  //调用父类Component的构造函数,固定写法。
  constructor(props){
    super(props);
    //创建数据
    this.state={
      inputValue:'hello',
      list:['学习React','学习前端']
    }
  }
  render() {
    return (
      <div>
        {/*jsx语法，有提示。bind 改变this指向为调用的函数 */}
        <input onChange={this.handleInputChange.bind(this)} value={this.state.inputValue}/>
        <button onClick={this.handleBtnClick.bind(this)}>提交</button>
        <ul>
          {
            // 循环输出list
            this.state.list.map((item,index)=>{
              return (
                <li onClick={this.handleItemDelete.bind(this,index)} key={index}>
                  {item}
                </li>
              )
            })
          }
        </ul>
      </div>

    )
  }

  handleInputChange(e){
    this.setState({
      inputValue:e.target.value
    })
  }
  //添加
  handleBtnClick(){
    this.setState({
      //展开运算符，拿到以前数组的内容，生成新的数组。
      list:[...this.state.list,this.state.inputValue],
      inputValue:''
    })
  }
  //删除 index为下标
  handleItemDelete(index){
    const list=[...this.state.list];
    //删除一个下标为index的值
    list.splice(index,1);
    this.setState({
      list:list
    })
  }
}
export default  TodoList;

show.js 代码

import React from 'react';
import TodoList from '../components/TodoList';




export default function() {

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

测试

点击按钮可以增加，点击文字可以删除。

二、拆分组件修改功能

创建 TodoItem.js 通过this.props.content获取父组件传递的内容

import React,{ Component } from 'react';

class TodoItem extends Component{
constructor(props){
  super(props);
  this.handleClick=this.handleClick.bind(this);
}
  render() {
    return (
      <div onClick={this.handleClick}>
        {this.props.content}
      </div>

    )
  }
  handleClick(){
    this.props.deleteItem(this.props.index)
  }
}
export default  TodoItem;

TodoList.js 引入子组件

import React,{ Component } from 'react';
import TodoItem from "@/components/TodoItem";
//Fragment 隐藏外层标签
class TodoList extends Component{
  //调用父类Component的构造函数,固定写法。
  constructor(props){
    super(props);
    //创建数据
    this.state={
      inputValue:'hello',
      list:['学习React','学习前端']
    }
  }
  render() {
    return (
      <div>
        {/*jsx语法，有提示。bind 改变this指向为调用的函数 */}
        <input onChange={this.handleInputChange.bind(this)} value={this.state.inputValue}/>
        <button onClick={this.handleBtnClick.bind(this)}>提交</button>
        <ul>
          {
            // 循环输出list
            this.state.list.map((item,index)=>{
              return (
                <div>
                  {/*组件内容传递*/}
                    <TodoItem content={item} index={index} deleteItem={this.handleItemDelete.bind(this)}/>
                  {/*<li onClick={this.handleItemDelete.bind(this,index)} key={index}>*/}
                  {/*{item}*/}
                  {/*</li>*/}
                </div>

              )
            })
          }
        </ul>
      </div>

    )
  }

  handleInputChange(e){
    this.setState({
      inputValue:e.target.value
    })
  }
  //添加
  handleBtnClick(){
    this.setState({
      //展开运算符，拿到以前数组的内容，生成新的数组。
      list:[...this.state.list,this.state.inputValue],
      inputValue:''
    })
  }
  //删除 index为下标
  handleItemDelete(index){
    const list=[...this.state.list];
    //删除一个下标为index的值
    list.splice(index,1);
    this.setState({
      list:list
    })
  }
}
export default  TodoList;