react 实现简单的todolist功能

需求：利用react组件化实现todolist的功能
首先要理解父子组件的传值方式，父组件通过属性在自组件绑定值或者方法，然后子组件利用this.props.属性名获取父组件传来的方法或者属性值。

首先在父组件中实现输入框和提交按钮
在这里插入图片描述

<div className="todolist">
                <div className='todolisttop'>
                    <input />
                    <button onClick={this.handleBtnClick}>提交</button>
                </div>
            </div>

css样式

body{
    display: flex;
    justify-content: center;
    align-items: center;
}
.todolist{
    width: 300px;
    height: 400px;
    /* border: 1px solid black; */
}
.todolisttop{
    width: 280px;
    margin-left: 10px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.todolisttop input{
    padding: 10px;
    width: 200px;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 18px;
    /* border-top-right-radius: none;
    border-bottom-right-radius: none; */
}
.todolisttop button{
    width: 80px;
    height: 38px;
    font-size: 16px;
    background: cornflowerblue;
    border: none;
    border-radius: 5px;
    /* margin-left: 3%; */
    /* margin-top: 10px; */
    cursor: pointer;
    color: #fff;
    margin-left: 6px;
}
ul li{
    font-size: 18px;
}

1、当我们往输入框输入的时候获取输入框的值
这时候就需要在父组件中定义this.state={inputValue:''},然后在input标签中绑定属性<input type='text' value={this.state.inputValue}>
在input标签中标定onChange函数，获取实时输入的value值，然后更新this.state.inputValue,<input type='text' value={this.state.inputValue} onChange="this.handleChange.bind(this)">

.handleChange函数

 handleChange(e) {
        const value = e.target.value
       this.setState(()=>({
        inputValue: value
       }))
    }

2、点击提交按钮的时候，把this.state.inputValue的值存入一个数组里面，这时候，就需要在this…state定义数组变量this.state = { inputValue: '', List: [] }

按钮提交函数handleBtnClick

handleBtnClick() {
        this.setState((prevState)=>({
            List: [...prevState.List, prevState.inputValue],
            inputValue: ''
        }))
    }

在button按钮上绑定事件<button onClick={this.handleBtnClick.bind(this)}>提交</button>
键盘按下Enter提交
键盘按下提交事件

handleKey(e) {
        // console.log(e.keyCode);
        if (e.keyCode === 13) {
            this.handleBtnClick()
        }
    }

在input上绑定onKeyDown事件<input type='text' value={this.state.inputValue} onChange="this.handleChange.bind(this)" onKeyDown={this.handleKey.bind(this)}>
删除函数

 handleItemDelete(index) {
        const list = [...this.state.List];
        list.splice(index, 1);
        this.setState(()=>({
            List: list
        }))
    }

接下来编写子组件TodoItem

render(){
        return(
        <div >父组件传来的值</div>
        )
    }

父组件引入子组件

import TodoItem from './TodoItem'

//通过函数返回
 getTodoItem(){
 //对数组List遍历，把遍历的值传给子组件TodoItem
       return this.state.List.map((item, index) => {
            return (
               <TodoItem content = {item} index={index} key={index} deleteItem={this.handleItemDelete.bind(this)}/>
            )
        })
    }

              <ul>
                    {this.getTodoItem()}
                </ul>

在子组件中接收父组件传来的属性和方法

import React, { Component } from 'react';



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

完整代码
父组件TodoList

import React, { Component } from 'react';
import './TodoList.css'
import TodoItem from './TodoItem'
class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '',
            List: []
        }
       this.handleChange = this.handleChange.bind(this);
       this.handleBtnClick = this.handleBtnClick.bind(this);
       this.handleItemDelete = this.handleItemDelete.bind(this);
       this.handleKey = this.handleKey.bind(this);
    }
    handleChange(e) {
        const value = e.target.value
       this.setState(()=>({
        inputValue: value
       }))
    }
    handleBtnClick() {
        this.setState((prevState)=>({
            List: [...prevState.List, prevState.inputValue],
            inputValue: ''
        }))
    }
    handleItemDelete(index) {
        const list = [...this.state.List];
        list.splice(index, 1);
        this.setState(()=>({
            List: list
        }))
    }
    handleKey(e) {
        // console.log(e.keyCode);
        if (e.keyCode === 13) {
            this.handleBtnClick()
        }
    }
    getTodoItem(){
       return this.state.List.map((item, index) => {
            return (
               <TodoItem content = {item} index={index} key={index} deleteItem={this.handleItemDelete}/>
            )
        })
    }
    render() {
        return (

            <div className="todolist">
                <div className='todolisttop'>
                    <input value={this.state.inputValue} 
                    type="text" onChange={this.handleChange} 
                    onKeyDown={this.handleKey} />
                    <button onClick={this.handleBtnClick}>提交</button>
                </div>
                <ul>
                    {this.getTodoItem()}
                </ul>
            </div>
        )
    }
}
export default TodoList;

TodoList.css

body{
    display: flex;
    justify-content: center;
    align-items: center;
}
.todolist{
    width: 300px;
    height: 400px;
    /* border: 1px solid black; */
}
.todolisttop{
    width: 280px;
    margin-left: 10px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.todolisttop input{
    padding: 10px;
    width: 200px;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 18px;
    /* border-top-right-radius: none;
    border-bottom-right-radius: none; */
}
.todolisttop button{
    width: 80px;
    height: 38px;
    font-size: 16px;
    background: cornflowerblue;
    border: none;
    border-radius: 5px;
    /* margin-left: 3%; */
    /* margin-top: 10px; */
    cursor: pointer;
    color: #fff;
    margin-left: 6px;
}
ul li{
    font-size: 18px;
}

子组件TodoItem.js

import React, { Component } from 'react';



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

来源：CSDN

作者：Jeslie-He

链接：https://blog.csdn.net/Hhjian524/article/details/104071232

标签

react

ToDoList

list

margin