React|编写一个简单todolist

🎆前言

在各种平台上找了一些教程跟着搓了一个最基础的react的todolist，分享一些在跟着敲的过程中的经验，仅供参考。

✨组成部分

todolist的组成部分应当包括

• 标题
• 输入框
• 提交按钮
• todolist item

✨初始化React项目

1. 官网安装node.js
2. 安装命令：npm i -g create-react-app
3. 创建react项目：create-react-app 项目名称
4. 启动react项目，进入刚创建好的react项目 npm start

✨Todolist.js

import React,{ Component} from "react";

导入react组件中的默认组件，并命令为React，用{}引入react文件中的成员组件Component

创建Component组件，初始化inputValue和list数组，以及使用export输出组件

class Todolist extends Component{
    constructor(props){
        super(props)
        this.state={
            inputValue:'',
            list:[]
        }
    }
}
export default Todolist;

先建立页面基本构成要素，一个输入框，一个按钮，下方显示的列表

render(){
    return(
        <div>
            <h1>Todolist</h1>
            <div><input/></div>
            <button>提交</button>
            <ul>
                <li>111</li>
            </ul>
        </div>
    
    )
}

需要的方法有

1. handleInputChange：监听使得值输入框内的文字随之改变
2. handleBtnClick：点击按钮时提交到列表，并且输入框内的文字变成空白
3. handleItemDelete：点击列表文字时删除该条目

handleInputChange(e){
    this.setState({
        inputValue:e.target.value
    })
}
handleBtnClick(){
    this.setState({
        list:[...this.state.list,this.state.inputValue],
        inputValue:""
    })
}
handleItemDelete(index){
    const list=[...this.state.list]
    list.splice(index,1)
    this.setState({
        list:list
    })
}

• 将handleInputChange绑定到input输入框中，同时输入框的值为state中的inputValue。
• 将handleBtnClick绑定到button按钮上。

render(){
    return(
        <div>
            <h1>Todolist</h1>
            <div>
                <input value={this.state.inputValue}
            onChange={this.handleInputChange.bind(this)}/>
            </div>
            <button onClick={this.handleBtnClick.bind(this)}>
                提交
            </button>
            <ul>
                <li>111</li>
            </ul>
        </div>
    
    )
}
export default Todolist;

再添加点击条目删除的方法，因为其state未知使用 Array.map() 渲染未知数量的元素this.state.list.map((item,index)=>{})

render(){
    return(
        <div>
            <h1>Todolist</h1>
            <div>
                <input value={this.state.inputValue}
            onChange={this.handleInputChange.bind(this)}/>
            </div>
            <button onClick={this.handleBtnClick.bind(this)}>
                提交
            </button>
            <ul>{
               this.state.list.map((item,index)=>{
                return(
                <li onClick={this.handleItemDelete.bind(this,index)} >
                     {item}   
                </li>  
                     )
                 })
                }
            </ul>
        </div>
    
    )
}
export default Todolist;

✨index.js

导入组件，挂载

import React from 'react';
import ReactDOM from 'react-dom';
import App from './Todolist';

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

✨style.css

以下是css的样式，写完引入父组件import"./style.css";

ul{
    list-style: none;
    padding: 0;
}

.input{
    background-color:rgb(39 120 157 / 32%);
}
.Component{
    background-color: gray;
}

🎇需要拆分组件的情况

将TodoItem单独拆分的情况，在父组件中将数据传递给子组件

render(){
    return(
        <div>
            <h1>Todolist</h1>
            <div>
                <input value={this.state.inputValue}
            onChange={this.handleInputChange.bind(this)}/>
            </div>
            <button onClick={this.handleBtnClick.bind(this)}>
                提交
            </button>
            <ul>
                {
                this.state.list.map((item,index)=>{
                    return(
                        <TodoItem 
                          content={item}
                          index={index}
            itemDelete={this.handleItemDelete.bind(this)}/>
                    )
                })   
                }
            </ul>
        </div>
    
    )
}
export default Todolist;

子组件,handleClick接收父组件传递下来的值完成删除，注意写完后把它引入父组件

import TodoItem from"./TodoItem";

import React, { Component } from "react";

class TodoItem extends Component {

  
  render() {
    return(
      <div onClick={this.handleClick.bind(this)}>  
        {this.props.content}
      </div>
    )
  }
  
  handleClick() {  
    this.props.itemDelete(this.props.index) 
  }
}

export default TodoItem;