首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在React JS中点击添加来自字段的新输入时,将" add“按钮固定在顶部

在React JS中,要实现点击添加来自字段的新输入时,将"add"按钮固定在顶部,可以通过以下步骤实现:

  1. 首先,在React组件的状态中添加一个数组,用于存储输入字段的值。例如,可以在组件的构造函数中初始化一个空数组:
代码语言:txt
复制
constructor(props) {
  super(props);
  this.state = {
    inputs: []
  };
}
  1. 在组件的render方法中,使用map函数遍历inputs数组,并渲染每个输入字段。同时,在数组的末尾添加一个额外的输入字段,用于添加新的输入。在这个额外的输入字段中,将"add"按钮固定在顶部。
代码语言:txt
复制
render() {
  return (
    <div>
      {this.state.inputs.map((input, index) => (
        <input key={index} value={input} onChange={this.handleInputChange} />
      ))}
      <input value="" onChange={this.handleInputChange} />
      <button onClick={this.handleAddClick}>Add</button>
    </div>
  );
}
  1. 实现handleInputChange方法,用于更新输入字段的值。该方法通过索引来确定要更新的输入字段,并将新的值存储在组件的状态中。
代码语言:txt
复制
handleInputChange = (event, index) => {
  const newInputs = [...this.state.inputs];
  newInputs[index] = event.target.value;
  this.setState({ inputs: newInputs });
}
  1. 实现handleAddClick方法,用于在点击"add"按钮时添加新的输入字段。该方法将一个空字符串添加到inputs数组中,触发组件的重新渲染。
代码语言:txt
复制
handleAddClick = () => {
  const newInputs = [...this.state.inputs, ""];
  this.setState({ inputs: newInputs });
}

通过以上步骤,就可以在React JS中实现点击添加来自字段的新输入时,将"add"按钮固定在顶部的功能。这样,每次点击"add"按钮时,都会在顶部添加一个新的输入字段,并保持"add"按钮的固定位置。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

从零开始构建React Native数字键盘功能

我们看到如何在 React Native 从头开始设置一个数字键盘,以便用户可以创建一个 PIN 并使用该 PIN 登录应用。...当点击 Keypad 内容时,我们首先调用 onPress 属性进行检查: 如果按下按钮值为 X 。如果是这样,它应该删除数组最后一个项目——换句话说,删除最后选择PIN值。...如果按下按钮值是除了 X 之外任何值。如果是,它应该使用 setCode 属性选中项目添加到代码数组。 如果代码数组长度等于 pinLength - 1 。...在 DialpadPin.js 文件,我们根据我们之前设定 4 PIN长度渲染一个 View 。...例如,使用库可以帮助你节省大量开发时间。然而,如果你需要特定功能或定制,那么投入时间来构建你自己可能会更好。 总结 在这篇文章,我们学习了如何在React Native创建自定义数字键盘。

29210
  • 一篇文章读懂 React and redux 前端开发 -DvaJS, a lightweight and elm-style framework.快速上手Dva 概念#例子和脚手架Dva 图解K

    在 dva 你可以通过 dva 实例属性 _store 看到顶部 state 数据,但是通常你很少会用到: const app = dva(); console.log(app....在 dva ,connect Model 组件通过 props 可以访问到 dispatch,可以调用 Model Reducer 或者 Effects,常见形式: dispatch({...type: 'user/add', // 如果在 model 外调用,需要添加 namespace payload: {}, // 需要传递信息 }); #Reducer type Reducer...通过 actions 传入值,与当前 reducers 值进行运算获得值(也就是 state)。...redux-saga 这个类库, 举个栗子: 点击创建 Todo 按钮, 发起一个 type == addTodo action saga 拦截这个 action, 发起 http 请求, 如果请求成功

    1.4K30

    前端框架「React」 VS 「Svelte」

    会更新显示点击次数 每次点击 Button 时,Button 自身颜色会跟着变化 首先使用如下命令在你电脑上创建一个目录,暂且命名为 svelte-react: mkdir svelte-react...在 App.js顶部,App() 函数之前,添加如下代码: import Heading from './Heading.js'; import Button from '....「状态向上传递」 为了让这个应用正常工作,每次点击按钮时,必须让 App 组件 count 状态值增1。因此需要一个机制来数据从子组件传递给父组件。... 上述代码两个属性都是在顶部 标签定义。 然后它创建了一个按钮。...请注意第 6 行代码语法,忽略掉下一节要介绍样式部分,直接看按钮点击事件侦听器,它跟以往使用习惯不同。 Svelte 使用一个 on: 指令来给 DOM 元素添加事件侦听器。

    3.5K30

    React Native 导航:示例教程

    任何给定时间只有一个屏幕呈现给用户,每个屏幕在被推入堆栈时显示,即当用户导航到某个屏幕时,它就被推到堆栈顶部。 想象一堆纸张。导航到一个屏幕会将其放在堆栈顶部,而导航回去则会将其从堆栈移除。...这两个库都提供了基于堆栈导航模型,便于在屏幕之间进行转换,每个屏幕放在堆栈顶部。...你还必须安装 react-native-gesture-handler 并在入口或根文件(index.js 或 App.js顶部导入它。跳过这一步通常会导致生产级别的崩溃,即使在开发工作正常。...*/ yarn add @react-navigation/bottom-tabs 我们创建一个 ContactScreen 文件,在应用程序添加另一个屏幕: /* components/ContactScreen.js...在 About 页面,可以为返回按钮实现相同方法。

    35910

    前端框架 React 和 Svelte 基础比较

    会更新显示点击次数 每次点击 Button 时,Button 自身颜色会跟着变化 首先使用如下命令在你电脑上创建一个目录,暂且命名为 svelte-react: mkdir svelte-reactcd...在 App.js顶部,App() 函数之前,添加如下代码: import Heading from './Heading.js';import Button from '....状态向上传递 为了让这个应用正常工作,每次点击按钮时,必须让 App 组件 count 状态值增1。因此需要一个机制来数据从子组件传递给父组件。... 上述代码两个属性都是在顶部  标签定义。 然后它创建了一个按钮。...请注意第 6 行代码语法,忽略掉下一节要介绍样式部分,直接看按钮点击事件侦听器,它跟以往使用习惯不同。 Svelte 使用一个 on: 指令来给 DOM 元素添加事件侦听器。

    2.2K50

    React vs Svelte

    会更新显示点击次数 每次点击 Button 时,Button 自身颜色会跟着变化 首先使用如下命令在你电脑上创建一个目录,暂且命名为 svelte-react: mkdir svelte-react...在 App.js顶部,App() 函数之前,添加如下代码: import Heading from './Heading.js'; import Button from '....「状态向上传递」 为了让这个应用正常工作,每次点击按钮时,必须让 App 组件 count 状态值增1。因此需要一个机制来数据从子组件传递给父组件。... 上述代码两个属性都是在顶部 标签定义。 然后它创建了一个按钮。...请注意第 6 行代码语法,忽略掉下一节要介绍样式部分,直接看按钮点击事件侦听器,它跟以往使用习惯不同。 Svelte 使用一个 on: 指令来给 DOM 元素添加事件侦听器。

    3K30

    分析 React 组件渲染性能

    感谢 Brian Vaughn, React 通过调度器包交互跟踪API对交互跟踪提供了实验支持。这里有更详细记录。 交互带有一个注释(例如“单击添加到购物车按钮”)和一个时间戳。...还应该为交互提供一个回调函数,你可以在其中执行与交互相关工作。 在电影APP,有一个 “电影添加到队列” 按钮(+)。单击此交互电影添加到你观看队列: ?...注意:React从他们开发包删除了 User Timing API ,取而代之React Profiler,它提供了更准确计时。他们可能会在未来3级浏览器重新添加它。...Next.js 最新版本还为许多事件添加了更多用户计时标记和度量,包括: Next.js-hydration Next.js-nav-to-render 所有这些度量都显示在 Timing 区域中:...下面我们可以看到一个应用程序并发模式TBT之前/之后TBT,在此更好地分散更新: ? 这些工具通常有助于获得一个浏览器级别的瓶颈视图,延迟交互长时间任务(如按钮点击响应),如下所示: ?

    3.5K10

    小程序当中文件类型,组织结构,配置,知识点等

    还有wx:if 和 {{}} 表达式,在网页是用js操作dom,在学页面的时候为了很好开发,就有了mvvm模式,需要我们学习react,vue等,都是把渲染和逻辑分开,在wxml,就是微信小程序...,通过{{msg}},然后在js,this.setData({ msg: "Hello World" }),就可以通过语法把一个变量绑定在界面上。...tab 背景色 list 最少2个、最多5个 tab position tabBar位置 pagePath 页面路径 text tab 上按钮文字 networkTimeout request...:用户身份,预览,上传代码,小程序版本,上线,提交审核 在pages字段里是用来放置所有页面路径,只要添加就可以自动生成哦,window字段里是放置所有页面的配置,顶部背景颜色,文字颜色等。...结语 下面我继续对 其他知识 深入讲解 ,有兴趣可以继续关注 小礼物走一走 or 点赞

    77020

    React Native 系列(八) -- 导航

    前言 本系列是基于React Native版本号0.44.3写。我们都知道,一个App不可能只有一个不变界面,而是通过多个界面间跳转来呈现不同内容。那么这篇文章介绍RN导航。...Navigator 从0.44版本开始,Navigator被从react native核心组件库剥离到了一个名为react-native-deprecated-custom-components单独模块...如果你需要继续使用Navigator,则需要先yarn add react-native-deprecated-custom-components安装,然后从这个模块import,即import {...我们来给HelloViewComponent.js添加点击事件,主要代码: constructor(props, context) { super(props, context...解决办法:在前面添加sudo,即yarn add react-native-deprecated-custom-components。 安装好之后,就可以看到Navigator了 ?

    6K80

    react-navigation导航器

    和h5用a标签来跳转不太一样是,rn必须依赖导航器跳转。导航器也可以看成是一个普通React组件,你可以通过导航器来定义你APP导航结构。...导航还可以渲染通用元素,例可以配置标题栏和选项卡栏。 react-natvigation自开源以来。在短短不到3个月时间,github上星数已达4000+。...它是Fb推荐使⽤库, 并且在React Native当前最新版本0.44Navigator删除。react-navigation据称有原生般性能体验效果。...把以下代码添加到 MainActivity.java package com.rn; import com.facebook.react.ReactActivity; // add import com.facebook.react.ReactActivityDelegate...createStackNavigator 提供APP屏幕之间切换能⼒,它是以栈形式还管理屏幕之间切换,切换到屏幕会放在栈顶部

    6.3K20

    React Native推送通知:完整操作指南

    在这篇文章,我们看到如何在React Native应用创建和发送推送通知。 什么是推送通知? 推送通知是从应用程序发送到已安装该应用用户消息或警报。...React Native 推送通知架构 在我们深入了解如何在 React Native 应用实现推送通知技术细节之前,理解React Native推送通知工作原理可能会有所帮助。...发送测试通知 我们可以通过添加推送通知令牌,使用Expo通知工具向设备发送测试通知。进入Expo通知工具,输入你令牌,输入标题和描述,保持你应用在后台,然后点击发送通知按钮来发送测试通知。...如果你访问Expo文档,你会找到关于如何在许多语言中实现服务器上推送通知信息。 在这个教程,我将使用一个Node.js服务器。...通过 style 属性进行自定义样式:开发者现在可以在通知嵌入图片和大量文本 基于触发器消息:如果满足某个条件,允许应用程序发送通知 易于使用交互API:顾名思义,这使得用户可以通过按钮或文本字段与通知进行交互

    1.3K10

    Spring 全家桶之 Spring Boot 2.6.4(六)- Web Develop(Part C)

    入时通过id选择器引入公共片段 重新启动应用,查看页面顶部导航栏和侧边栏 修改过后,侧边栏能够正常显示 抽取公共片段到单独页面 上面定义公共片段还是在具体页面,可以公共页面,顶部和侧边栏单独抽取到一个...employee(Model model){ return "employee/add"; } 重新启动应用,点击Add按钮 能正常跳转至页面 修改添加表单为如下: ...name 重启应用,点击EDIT按钮 可以正常回显数据 但是在list.html页面点击添加按钮,服务端后台报错 这是应为点击添加来到页面时,并没有传递employee对象,空对象获取lastName...属性值,所以会报错,因此需要区分是员工修改还是员工添加,只有在employee对象不为空时候才是编辑页面,才会进行数据回显 重新启动,点击添加按钮 页面能正常显示。...对象id为空,因此需要在form添加添加一个隐藏input框,id传递到服务端,如下图所示 重新启动应用,再次测试 修改成功 七、Delete Employee 在EmployeeController

    86320

    设计和实现一个 Chrome 插件提升登录效率

    本文讲述一下如何在浏览器环境,扩展 Chrome 浏览器原有的“记住密码”功能,实现快捷登录、隔离账号信息以及备注标签等方便使用功能,同时分享给测试、后端、产品等其他伙伴,提高大家效率,希望这次探索能给更多的人带来启发...更便捷交互设计 既然可以访问 Web 内容,那么最简便操作就是不用触发任何其他按钮打开弹层,直接 识别登录页面,在原有登录页面的空白处 插入我们组件 DOM 元素,就可以实现最便捷操作。...options: { babelrc: false, presets: [ // 添加 preset-react 识别...JavaScript 代码更新后也是不能热加载,我们可以访问 chrome://extensions/ 点击下图中按钮重新加载,或者安装 Extensions Reloader (https://...hl=zh-CN) 插件,点击按钮进行重新加载。 安装扩展文件 Chrome 允许安装 Chrome 应用市场和本地文件两种来源扩展文件。

    1.6K10

    TDesign 更新周报(2022年9月第1周)

    multiple 时,设置 className 不起作用问题 @RainyLiao (#1441)修复表格部分元素无法随 Table 变化而改变问题,:空数据等,tdesign-react#1319... Cascader 点击清除按钮表现异常问题 @pengYYYYY (#1457)Watermark: 修复 removable 属性设置不生效,及 content 不支持动态修改变化问题 @carolin913... (#1601)DatePicker:修复 cell-click 事件失效问题 @HQ-Lin (#1544)修复空字符串页面崩溃问题 @HQ-Lin (#1590)Tabs: 修复 addable 添加按钮定位错误...(issue #1012) @uyarn (#1618)Tabs: 修复 addable 添加按钮定位错误 @HelKyle (#1553)LiveDemo: 修复slider 垂直布局预览问题 (issue...统一全部页面及组件用sfc编写 by @zhangpaopao0609 in Tencent/tdesign-vue-next-starter#279 Bug Fixes修复混合模式下选择分割菜单再点击顶部登录页出现空白页异常

    2.6K20

    Web3 全栈指南

    在这篇文章,我们将了解如何在前端应用,使用 HTML 和 JavaScript 与链上应用(智能合约或其他应用)交互。...如何将使用 Metamask 连接到智能合约 当然也可以是其他钱包,浏览器另一个钱包, Phantom、Walletconnect 等。...然后,如果你点击顶部 sources,会看到如下图内容。(如果你找到sources,你可以点击>>按钮来显示更多选项)。...用 HTML 和 JavaScript 连接到加密货币钱包 我们首先展示这一切是如何在 HTML 和 JavaScript 完成,然后我们转向使用 Nextjs/React 例子。...最好创建一个浏览器账号配置(Profile)或下载另一个有 Metamask 插件浏览器)点击顶部网络按钮,然后 添加网络(Add Network)。

    4.9K21

    使用 useState 需要注意 5 个问题

    使用不同数据类型(空状态或空值)初始化 useState 导致空白页错误,如下所示。...我们首先两次点击第一个“Add +1”按钮(这将更新状态为1 +1 = 2),之后,我们点击Add +1 later” —— 这将获取当前状态(2)快照,并在两秒后调度更新,向该状态添加 1。...但是当这个计划更新还处于过渡阶段时,我们继续点击Add +1”按钮三次,当前状态更新为5(即2 +1 +1 +1 = 5)。...因为 setState() 返回或传递给它任何值赋值为状态。 一种典型老式方法是创建一个对象引用,并将前一个用户对象分配给它,直接修改用户名。...使用这个扩展操作符,你可以轻松地现有项属性解包到,同时修改或向解包项添加属性。

    5K20

    想让你工作轻松高效吗?揭秘Java + React导出ExcelPDF绝妙技巧!

    本文将使用前端框架React和服务端框架Spring Boot搭建一个演示Demo,展示如何在服务端导出Excel和PDF文件。...实践 本文演示如何创建一个简单表单,其中包括姓名和电子邮箱字段,这些字段将作为导出数据。同时,前端提供一个下拉选择器和一个导出按钮,通过下拉选择器选择导出格式,然后点击导出按钮发送请求。...2.设置表单部分 更新Src/App.js代码,创建React app时,脚手架会创建示例代码,需要删除它们。如下图(红色部分删除,绿色部分添加)。...在Src目录下,添加一个名为FormComponent.js文件,在App.js添加引用。 在FormComponent.js添加如下代码。...三个请求,会分别向已定义api发送请求,其中fetchCount,仅会在页面第一次完成加载时执行。其他两个请求方法会在点击按钮时触发。

    18130
    领券