React_todoList增删改查/redux_todoList增删改查

最新推荐文章于 2023-01-03 00:27:28 发布

微光时空

最新推荐文章于 2023-01-03 00:27:28 发布

阅读量399

点赞数

分类专栏： react React案例

本文链接：https://blog.csdn.net/M106588L/article/details/92059487

版权

本文详细介绍了使用React和Redux实现TodoList应用的增删改查功能，涉及组件通信的多种方式，包括父子、子父及非父子（兄弟）组件之间的数据传递。文中给出了App.js、style.css、add.js、list.js等关键文件的实现，并展示了如何在home.js中组织视图结构，以及在content父组件中封装list.js组件。

摘要由CSDN通过智能技术生成

主要知识点:组件通信(父子传参,子父传参,非父子传参{兄弟传参})
App.js

import React, {
    Component } from 'react'
import ToDoContent from "./toDoContent"
import Add from "./add"
import "./style.css"
class App extends Component {
   
    constructor(props) {
   
        super(props);
        this.state = {
   };
    }
    render() {
   
        return <div className="wrapper">
            <h3>toDoList</h3>
            <Add />
            <ToDoContent />
        </div>
    }
}
export default App;

style.css

*{
   
    margin:0;
    padding:0;
    list-style: none;
}

#root,html,body{
   
    height:100%;
    width:100%;
}
.wrapper{
   
    height:100%;
    width:100%;
    display:flex;
    flex-direction: column;
    overflow: hidden;

}
.wrapper>h3{
   
    height:40px;
    width:100%;
   line-height: 40px;
  text-align: center;
  background:salmon;
}
.add>input{
   
    height:30px;
    width:90%;
    margin-left:5%;
    border:1px solid #ccc;
    margin-top:8px;
    text-indent: 10px;
    font-size:16px;
}
.list{
   
    margin-left:15px;
    margin-top:10px;
}
.inputs{
   
    margin-top:5px;
}
.inputs>span{
   
    font-size:18px;
    margin-left:5px;
}
.inputs>button{
   
    height:30px;
    width:45px;
    line-height:30px;
    text-align: center;
    font-size: 15px;
    margin-left:6px;
}

add.js添加

import React, {
    Component } from 'react'
import bus from "../utils/bus"
class Add extends Component {
   
    constructor(props) {
   
        super(props);
        this.state = {
   
            val: "",
        };
    }
    render() {
   
        let {
    val } = this.state;
        return <div className="add">
            <input type="text" value={
   val} onChange={
   this.handChange.bind(this)}
                onKeyDown={
   this.handDown.bind(this)}
            />

        </div>
    }
    handChange(e) {
     //input按下事件获取到input的值
        // console.log(e.target.value)
        this.setState({
   
            val: e.target.value,
        })
    }
    handDown(e) {
     //键盘按下事件判断他的键值是否是13,然后通过子父通信传参 emit是发布
        if (e.keyCode == 13) {
     //下面的是emit发布,通过自定事件传参
            bus.emit("inputAdd", {
    val: this.state.val, isChecked: false, status: "todo" })
            this.setState({
   
                val: ""
            })
        }
    }
}

export default Add;

list.js 里面的小数据

import React, {
    Component } from 'react'
class List extends Component {
   
    constructor(props) {
   
        super(props);
        this.state = {
   };
    }
    render() {
   
        let {
    obj } = this.props;
        return <div className="inputs"