React 笔记（2）带简易版todoList案例

最新推荐文章于 2023-05-01 14:07:05 发布

偏到鸳鸯两字冰

最新推荐文章于 2023-05-01 14:07:05 发布

阅读量643

点赞数 1

文章标签： react.js javascript 前端 html

本文链接：https://blog.csdn.net/nlq12345/article/details/122243696

版权

本文介绍了React中非受控和受控表单的使用，包括DOM节点引用、双向数据绑定。通过示例展示了如何创建组件，如<User>组件，并设置了默认属性。此外，还提供了一个简易的TodoList应用示例，包含添加、删除和检查任务功能，利用state管理和事件处理实现交互。

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

dom节点引用

非受控表单

import {createRef } from 'react'
   this.inpRef=createRef()

<input ref ={this.inpRef}>

this.inpRef.current 获取节点

表单双向绑定

受控表单

<input value ={this.state.msg}
onChange={(e)=>this.setState({msg:e.target.value})}
>

组件

一个函数就是就是一个组件函数名称是大写

        <User item={{ name: "mumu", avatar: logo }}></User>
        <User item={{ name: "laozeng", avatar: h5 }}></User>

function User(props) {
  return (
    <div>
      <div className="avatar">
        <img src={props.item.avatar} alt="" width="80" />
      </div>
      <div>{props.item.name}</div>
      <hr />
    </div>
  );
}
//设置User默认属性
User.defaultProps = { item: { name: "游客", avatar: h5 } };

类组件

一个类就是一一个组件(class类)

       <Produce></Produce>

class Produce extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        <div>商品图片</div>
        <div>商品的名称</div>
        <div>商品的价格</div>
      </div>
    );
  }
}

简易todoList

import React, { Component, createRef } from "react";

class App extends Component {
 constructor(props) {
   super(props);
   this.state = {
     list: [
       { title: "学习vue", done: true },
       { title: "学习react", done: false },
     ],
   };
   // 创建个dom引用
   this.tempRef = createRef();
 }
 //删除
 delItem = (item) => {
   //缓存list
   var list = this.state.list;
   //查找下标
   var ind = list.findIndex((value) => value.title === item.title);
   //删除
   list.splice(ind, 1);
   //更新(setState才公触发视图的更新)
   this.setState({ list });
 };
 //添加
 addItem = () => {
   //缓存list
   var list = this.state.list;
   var inp = this.tempRef.current;

   list.unshift({ title: inp.value, done: false });
   this.setState({ list });
   inp.value = "";
 };
 //复选双向绑定
 checkItem = (item) => {
   var list = this.state.list;
   var ind = list.findIndex((value) => value.title === item.title);
   list[ind].done = !list[ind].done;
   this.setState({ list });
 };
 render() {
   return (
     <div>
       <input type="text" ref={this.tempRef} />
       <button onClick={this.addItem}>添加</button>
       <h3>正在进行{this.state.list.filter((item) => !item.done).length}</h3>

       {this.state.list
         .filter((item) => !item.done)
         .map((item) => (
           <div className="item" key={item.title}>
             <input
               type="checkbox"
               checked={item.done}
               onChange={this.checkItem.bind(this, item)}
             />
             <span>{item.title}</span>
             <button onClick={this.delItem.bind(this, item)}>X</button>
           </div>
         ))}

       <h3>已完成{this.state.list.filter((item) => item.done).length}</h3>
       {this.state.list
         .filter((item) => item.done)
         .map((item) => (
           <div className="item" key={item.title}>
             <input
               type="checkbox"
               checked={item.done}
               onChange={this.checkItem.bind(this, item)}
             />
             <span>{item.title}</span>
             <button onClick={this.delItem.bind(this, item)}>X</button>
           </div>
         ))}
     </div>
   );
 }
}

export default App;