react 上传文件(多选)功能入的坑

2023-11-20

1.
这里写图片描述
这里报错是因为onChange的this指向不对,
解决方法在constructor中写”this.onChange=this.onChange.bind(this);”或者在绑定事件的时候写”onChange={this.onChange.bind(this)} “

2.
这里写图片描述
在给旧的数组afileNamelll赋值的时候失败,
解决方法,在定义新的数组的时候,
const newFile = […this.state.fileName];

3.
这里写图片描述
这里写图片描述
这里写图片描述
我在事件里面定义了text,在render()里面调用,这样初始化的时候是可以加载上去的,但是在异步setState url的时候,text里面的url是改不了的,还是初始化的值。
这种写法是错误的,所有的渲染都应该写在render()里面的。
解决方法:
这里写图片描述
这里写图片描述

在render()里面写好判断,要加载哪个div模块,在异步里面更改showState的状态,会使页面重新渲染,里面的url属性也会变化

问题原因:不了解生命周期

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react 上传文件(多选)功能入的坑 的相关文章

  • React + Umi + Dva + Antd 简述 及创建项目过程简述

    React 你的第一个组件 React React是前端三大主流框架之一 你可以在React里传递多种类型的参数 如声明代码 帮助你渲染出UI 也可以是静态的HTML DOM元素 也可以传递动态变量 甚至是可交互的应用组件 安装react框
  • 虚拟列表的实现思路(附带react代码)

    虚拟列表实现思路 代码链接 div class 滚动容器 div class 撑起列表正常高度 div div class 列表容器 div class 列表项 div div div 1 列表项 的高度确定 2 利用 滚动容器 的高度计算
  • React Native 环境搭建, 新建项目, 运行和调试

    React Native 可以理解为一个基于 JavaScript 具备动态配置能力 面向前端开发者的移动端开发框架 目前为止虽然一直还没有V1 0 0版本 但是相信很多小伙伴都了解过或者已经入坑了 为什么RN那么有人气呢 我们可以先简单分
  • React重新渲染的触发机制及其优化策略

    React是一个用于构建用户界面的JavaScript库 它的核心特点之一是使用虚拟DOM Virtual DOM 来实现高效的组件渲染 那组件重新渲染的机制是如何呢 基于这些机制 如果进行优化呢 虚拟DOM是一个用JavaScript对象
  • 对useReducer的理解

    useReducer是React提供的一个高级Hook 它不像useEffect useState useRef等必须hook一样 没有它我们也可以正常完成需求的开发 但useReducer可以使我们的代码具有更好的可读性 可维护性 可预测
  • state和props的区别__react

    首先说明 state和props是每个组件都有的 其次 state可变 但props不可变 这是官网给出的说法 但实操过程中 state的确可变 但props也可以变 是不是fb搞错了 当然不是 这里的可变与不可变 说的是改变后 是否会重新
  • 如何在 Ubuntu 20.04 上使用 React 前端设置 Ruby on Rails v7 项目

    作者选择了电子前沿基金会接受捐赠作为为捐款而写程序 介绍 红宝石 on Rails是一个流行的服务器端 Web 应用程序框架 它为当今网络上存在的许多流行应用程序提供支持 例如GitHub Basecamp 声云 Airbnb and Tw
  • styled-components 的用法

    用于给标签或组件添加样式 给标签或组件添加样式 import styled from styled components styled button 给button标签添加样式 const Button styled button back
  • chrome浏览器安装redux-devtools调试工具

    chrome浏览器安装redux devtools调试工具 1 点击进入https www chromefor com 2 在搜索框搜索redux 3 找到最新版本 Redux DevTools v2 17 0 进行下载 4 选择下载线路
  • Ant Design Pro 从零到一教程

    说在最前面的话 可是能全网唯一适合小白的antd教程 因为我找了接近一个周的教程 无论是视频 博客等等都没有比较完整的教程 所以才说这可能是唯一全网适合小白教程 文章末有相关学习链接 适用人群 喜欢看文字或者代码学习的人 学习的人掌握基本的
  • 一文揭秘饿了么跨端技术的演进、实践与落地

    本文会先带领大家一起简单回顾下跨端技术背景与演进历程与在这一波儿接着一波儿的跨端浪潮中的饿了么跨端现状 以及在这个背景下 相较于业界基于 React Vue 研发习惯出发的各种跨端方案 饿了么为什么会选择走另外一条路 这个过程中我们的一些思
  • 三分钟实现一个react-router-dom5.0的路由拦截(导航守卫)

    不同于vue 通过在路由里设置meta元字符实现路由拦截 在使用 Vue 框架提供了路由守卫功能 用来在进入某个路有前进行一些校验工作 如果校验失败 就跳转到 404 或者登陆页面 比如 Vue 中的 beforeEnter 函数 rout
  • Notion笔记搭建博客网站 - NotionNext

    NotionNext是什么 NotionNext是我在Github上开源的基于Next js框架开发的博客生成器 目的是帮助写作爱好者们通过Notion笔记快速搭建一个独立站 从而专注于写作 而不需要操心网站的维护 它将您的Notion笔记
  • 关于Vue.js和React.js,听听国外的开发者怎么说?

    VueJS 与 ReactJS 到底怎么样如何 听听别人怎么说 使用所有新的库和框架 很难跟上所有这些库和框架 也就是说 这就需要您决定哪些是值得花时间的 让我们看看人们说什么 和Vue JS一起工作是很愉快的 我发现学习曲线很浅 然而 这
  • React官方文档--Lifting State Up

    Lifting State Up 如果 几个组件需要同时影响并且修改同一个数据 我们建议将这个共享状态进行提升 给他们最近的共同祖先 在这个部分 我们将要创建一个温度计算器来判断水会不会在给定温度下沸腾 我们将从一个叫做BoilingVer
  • React事件处理及事件流

    React事件处理 React事件处理是通过将事件处理器绑定到组建上处理事件 事件触发的同时更新组建的内部状态 内部状态更新会触发组件的重绘 React 元素的事件处理和 DOM 元素的事件处理很相似 但语法上的略有区别 在React中事件
  • reactJS 干货(reactjs 史上最详细的解析干货)

    一 State和 Props state是状态机 应该包括 那些可能被组件的事件处理器改变并触发用户界面更新的数据 譬如需要对用户输入 服务器请求或者时间变化等作出响应 不应该包括 计算所得数据 React组件 在render 里使用pro
  • react之封装有无Token(路由权限控制)的高阶组件

    TOC 前景 有些路由页面内的内容信息比较敏感 如果用户没有经过登录获取到有效Token 是没有权限跳转的 根据Token的有 无控制当前路由是否可以跳转就是路由的权限控制 技术方案 实现步骤 1 在 components 目录中 创建 A
  • 黑马React:基础拓展

    黑马React D10 基础拓展 Date December 18 2023 useReducer 基础使用 作用 让 React 管理多个 相对关联 的状态数据 补充 和useState的作用类似 用来管理相对复杂的状态数据 特点 use
  • 如何提高React组件的渲染效率的?在React中如何避免不必要的render?

    面试官 说说你是如何提高组件的渲染效率的 在React中如何避免不必要的render 一 是什么 react 基于虚拟 DOM 和高效 Diff 算法的完美配合 实现了对 DOM 最小粒度的更新 大多数情况下 React 对 DOM 的渲染

随机推荐

  • 小程序v-for与key值使用

    小程序中的v for和key与Vue中的用法基本相同 v for用于循环渲染列表 key用于给每个循环项分配一个唯一的标识 使用v for时 通常建议使用wx for代替 例如
  • SQL Server 中给字段设置默认值的方式

    1 在创建表的时候创建默认值 if object id T U is not null drop table T GO create table T ID int Name varchar 20 LoginTime datetime def
  • RecyclerView应用 —— 好友列表实现

    实现的效果类似于QQ好友列表 点击可展开 再次点击收起 两个Item的布局都很简单 这里就不给布局代码了 值得一提的是 RecyclerView本身并没有ListView那样的点击效果 想要类似效果可以为Item的根布局写个Selector
  • JS混淆加密的代码如何解密

    科普简介 混淆是指将 JavaScript 代码变得难以理解的过程 这可以通过更改变量名 函数名和类名 以及将代码压缩到一行来实现 混淆的主要目的是使代码难以被盗用 并保护代码的知识产权 功能作用与常用的解决方案 混淆后的代码很难阅读 但是
  • Maven进阶-配置仓库

    1 1maven介绍 Maven是一个项目管理和综合工具 Maven提供了开发人员构建一个完整的生命周期框架 开发团队可以自动完成项目的基础工具建设 Maven使用标准的目录结构和默认构建生命周期 主要服务于基于Java平台的项目构建 依赖
  • Linux系统如何看目录属于哪个磁盘分区

    Linux是先有目录 再有磁盘分区 df h 目录 例如 没有挂载磁盘的目录 显示在系统盘 root iZ2ze57v3n0zma46zqiq8nZ sh 1 5 5 df h alidata Filesystem Size Used Av
  • Unity使用spine动画

    Unity使用spine动画 在 Unity 中 常常使用 Spine 来制作一些动画 引擎本身并不能直接播放 Spine 动画 需要额外导入一个 RunTime 插件库才能支持 官网插件导入 当然 也可以到 Spine 官网关于 Unit
  • 机器学习原理(1)集成学习基本方法

    一 什么是集成学习 集成学习 ensemble learning 通过将多个学习器进行组合来完成学习任务 下图显示集成学习的一般结构 取自周志华老师的西瓜书 个体学习器通常由一种现有的学习算法从训练数据产生 例如决策树 C4 5 CART
  • C语言之——自定义数据类型

    目录 前言 什么是自定义数据类型 一 自定义数据类型之 数据类型命名 1 深入应用typedef 二 自定义数据类型之 结构体类型命名 1 深入理解struct结构体 三 自定义数据类型之 联合体类型命名 1 union与struct的区别
  • FreeRTOS多任务调度器基础

    Cortex M4中SysTick调度器核心 Cortex M4中的中断管理 Cortex M4中影子栈指针 Cortex M4中SVC和PendSV异常 1 Cortex M4中SysTick调度器核心 systick每一次中断都会触发内
  • c语言—指针非常全面、详细

    目录 一 初步认识指针 一级 二 数组指针 1 一维数组与指针 2 二维数组与指针 三 函数指针 四 指针数组 2 函数指针数组 五 指针函数 六 二级 多级 指针 七 指针定义的归纳 一 初步认识指针 一级 1 指针变量 指针变量是一个特
  • c++优先队列简介及例题:5.4.1 围栏修复

    优先队列 其实就是个队列 只不过里面的元素会被自动按一定的顺序来排列 可以是递增顺序 也可以是递减顺序 写法如下 头文件 include
  • 020 - STM32学习笔记 - Fatfs文件系统(二) - 移植与测试

    020 STM32学习笔记 Fatfs文件系统 二 移植与测试 上节学习了FatFs文件系统的相关知识 这节内容继续学习在STM32上如何移植FatFs文件系统 并且实现文件的创建 读 写与删除等功能 各位看官觉得还行的话点点赞 收藏一下呗
  • FastDFS-01-单机和集群搭建

    我是码赛客1024 本节我们一起搭建FastDFS 一 介绍 FastDFS是一个开源的轻量级分布式文件系统 它对文件进行管理 功能包括 文件存储 文件同步 文件访问 文件上传 文件下载 等 解决了大容量存储和负载均衡的问题 特别适合以文件
  • 对象创建的几个步骤

    对象创建的几个步骤 一 先把要创建的对象的类信息加载进内存 二 在内存开辟空间 1 如果内存是规整的 则使用指针碰撞 2 如果不规整 则会维护一个空闲列表 内存是否规整根据具体的垃圾回收算法来决定 三 开辟空间需要解决并发问题 在堆中创建对
  • shell脚本一键安装JDK及配置环境变量

    这是我学了半天shell写出来的 不适合大神看 为什么我要写这样安装JDK并配置环境变量的脚本呢 因为我和linux打交道还是比较多的 然而每次都要安装JDK 配置环境变量 这样的事情对于刚接触linux的人来说是很乐意做的 但是接触多了
  • 浏览器请求队列机制-请求为什么会阻塞

    前言 最近遇到一个问题 我1个站点链接2个后端服务 但1个后端服务有问题 导致访问超时 但请求接口都是分开的 自认为一个服务站点请求超时 不会影响到另外一个请求的 但不是 全部请求都发不出去 为什么呢 是不是浏览器有请求机制管理 正常情况前
  • html理解MVC模型与MVVM模型底层实现

    一 MVC模型的底层实现 1 1 相关代码 div div
  • python基础编程小实例13——手机通讯录

    本文更新于2022 05 18 bug已修复 编程语言 python3 9 题目 可以在通讯录中通过姓名查看相关联系人的联系方式等信息 也可以在其中新增联系人 或修改 删除联系人信息 本实例要求编写程序 实现具备添加 查看 修改以及删除联系
  • react 上传文件(多选)功能入的坑

    1 这里报错是因为onChange的this指向不对 解决方法在constructor中写 this onChange this onChange bind this 或者在绑定事件的时候写 onChange this onChange b