更改文本框(react、redux、material ui)后显示保存按钮

更改文本框（react、redux、material ui）后显示保存按钮是一个常见的前端开发需求。以下是一个完善且全面的答案：

在前端开发中，当用户更改文本框中的内容时，我们通常希望能够及时地将这些更改保存起来。为了实现这个功能，我们可以利用React框架结合Redux状态管理和Material UI组件库。

首先，我们需要在React组件中使用Redux来管理文本框的状态。Redux是一个用于JavaScript应用程序的可预测状态容器，它可以帮助我们更好地管理应用程序的状态。我们可以使用Redux的connect函数将React组件连接到Redux存储，并将文本框的值存储在Redux存储中。

接下来，我们可以使用Material UI组件库中的文本框组件来创建一个可编辑的文本框。当用户更改文本框中的内容时，我们可以通过监听文本框的onChange事件来更新Redux存储中的文本框值。

一旦文本框的值发生更改，我们可以在React组件中根据Redux存储中的文本框值来决定是否显示保存按钮。如果文本框的值与之前保存的值不同，我们可以将保存按钮设置为可见状态，否则将其设置为隐藏状态。

当用户点击保存按钮时，我们可以触发一个保存操作，将Redux存储中的文本框值保存到后端服务器或本地存储中。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云Serverless Cloud Function（SCF）：https://cloud.tencent.com/product/scf
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发（MSS）：https://cloud.tencent.com/product/mss
腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse

请注意，以上链接仅供参考，具体产品选择应根据实际需求和情况进行评估。

相关·内容

一文入门react全家桶

让指定的文本做显示 / 隐藏的渐变动画 2. 从完全可见，到彻底消失，耗时2S 3. 点击“不活了”按钮从界面中卸载组件 2.6.2. 理解 1.组件从创建到死亡它会经历一些特定的阶段。...组件的组合使用-TodoList 功能: 组件化实现此功能显示所有todo列表输入文本, 点击按钮显示到列表的首位, 并清除输入的文本第4章：React ajax 4.1....多种路由跳转方式效果第6章：React UI组件库 6.1.流行的开源React UI组件库 6.1.1. material-ui(国外) 1.官网: http://www.material-ui.com...理解 1.一个react插件库 2.专门用来简化react应用中使用redux 7.6.2. react-Redux将所有组件分成两大类 1.UI组件 1)只负责 UI 的呈现，不带有任何业务逻辑 2)...通过props接收数据(一般数据和函数) 3)不使用任何 Redux 的 API 4)一般保存在components文件夹下 2.容器组件 1)负责管理数据和业务逻辑，不负责UI的呈现 2)使用 Redux

3.4K2 0

React vs Angular，到底那个更好用

React 则使用单向或向下的数据绑定。单向数据流不允许子元素在更新时影响到父元素，因此保证了只有已获准的组件才会发生更改。...⑤预构建的 UI 设计元素：Angular Material vs 社区支持的组件 Angular：随着材料设计（Material Design）语言在 Web 应用中流行，更多的工程师受益于其开箱即用的材料工具集...其 Angular Material 能够对表单控件、导航、布局、按钮、指示器、弹窗、模块、以及数据表，实现一系列常见的交互模型。由于各种预构建元素的存在，配置 UI 的速度变得更快。...您需要安装 Material-UI 库和各种依赖项，才能使用 React 的材料设计进行构建。...目前，由于约有 60％的 React 应用构建会用到 Redux，因此 Redux 成了一种必备工具，而 React 学习曲线则主要是由 Redux 库所决定。

5.7K6 0

Redux的设计模式

Redux就是数据仓库，他把数据统一保存起来，在隔离的数据和UI的同时还处理了他们之间的关系。使用Redux的目的是让状态state的变化可控可预测。...React组件通过订阅(subscribe )Store来获得数据，然后使用数据来渲染UI,UI通过显示器显示给用户，用户通过鼠标和键盘与组件进行交互，在交互中不可避免需要改变数据，在React中数据的流动是单向的...简化后的六层我们只保留Reducer，Store，React组件，Actions这四个部分。为了更加清晰我们这里将Reducer从Store中移了出来，实际上他们是一体的。...React Component会订阅Store，Store中的数据就会被推送过来，然后渲染UI. 如果组件需要更改数据他会发送一个Action，这个过程就叫做dispatch。...假设我们页面中有一个button按钮和一个div元素，这个元素用来展示一个数字，初始值为0，当我们点击button按钮的时候让div中显示的数字增加。

1.5K2 0

企业级 React 项目的高级测试设置

} from 'react-redux';import { createStore } from 'redux';import { initialState as reducerInitialState...其中一个例子是material-ui或styled-components的ThemeProvider。...场景3：使用React Router进行测试将任何操作完成后导航到新路由是一种非常常见的做法。比如说，你希望在登录成功后将用户重定向到首页。我们该怎么做呢？...我们还将我们的children用react-router提供的MemoryRouter包装起来。测试导航比如说，你正在测试一个FirstPage，点击按钮后导航到另一页SecondPage。...我们将使用react-router-dom的Router来为第二个URL路径挂载一个虚拟组件，并确保它显示在画面中。

950 0

【React】归纳篇（十）组件间通信方式之Redux | UI组件AntDesign | Redux-react

组件库 material-UI(www.material-ui.com) and-design PC(ant.design/index-cn) mobile(mobile.ant.design/index-cn.../docs/react/use-with-create-react-app-cn redux （难点）语法套路深文档：http://www.redux.org.cn 概览 redux 是一个独立专门用于做状态管理的...react-redux 1、一个react插件库 2、专门用于简化react应用中使用redux 使用redux先写好结构：在src中新建redux和containers文件夹在redux文件夹下写好如下文件名...：使用Provider组件对dispatch、subscribe、getState…进行全局管理 React-Redux 将所有组件分为两大类 UI组件只负责UI的呈现，不带有任何业务逻辑...通过props接收数据，一般数据和函数不使用任何Redux的API 一般保存在components文件下容器组件负责管理数据和业务逻辑，不负责UI的呈现使用Redux的APi 一般保存在

2393 0

设计师都能懂的 Redux 指南

接下来，我们需要实际显示数据。我们需要将这些数据分配给对应的 UI 元素，这些 UI 元素表示我们在浏览器中实际看到的内容。...当请求失败是，应用只需回滚至前一个 UI 状态即可，并使用服务器响应的实际结果，例如显示错误信息。如同撤消/重做一样，Redux 也支持 Optimistic UI。...当从服务器收到否定结果时，可以轻松记录，重放和还原数据更改。持久化和从状态启动 Redux 可以很容易地将应用程序中发生的事情保存到本地存储中。...如果你使用 Redux 构建游戏，则只需要几行代码来保存/加载游戏进度，而无需更改其余代码。...用户单击“报告错误”按钮。系统自动将她所做的事情发送给开发人员。开发人员单击“重播错误”按钮并观察错误是如何发生的。 bug 被当场压扁，每个人都很开心！

1.6K1 0

从设计的角度看 Redux

1.7K3 0

react笔记

React UI组件库 6.1 流行的开源React UI组件库 6.1.1 material-ui(国外) 1.官网: http://www.material-ui.com/#/ 2.github:...https://github.com/callemall/material-ui 6.2.2 ant-design(国内蚂蚁金服) 1.官网: https://ant.design/index-cn...redux中执行异步任务(ajax, 定时器) 7.4.2 使用异步中间件 npm install --save redux-thunk 7.5 react-redux 7.5.1 理解 1.一个react...插件库 2.专门用来简化react应用中使用redux 7.5.2 react-Redux将所有组件分成两大类 1.UI组件 1)只负责 UI 的呈现，不带有任何业务逻辑 2)通过props接收数据...(一般数据和函数) 3)不使用任何 Redux 的 API 4)一般保存在components文件夹下 2.容器组件 1)负责管理数据和业务逻辑，不负责UI的呈现 2)使用 Redux 的 API

1.4K2 0

回望过去，展望未来- 2024 React 生态一览表

在我毕业后，参与了一个项目，此时命运的齿轮转动了，前端就是用React，后端用的是Java。然后，你没看错，我们当时都是全栈开发，前后端都是自己来弄。...它有Vue和React的版本。 3. Material-UI Material-UI[18] 是一个受欢迎且得到良好维护的 React UI 框架。...它允许我们检查 React 组件层次结构，查看组件的状态和属性，甚至对组件的状态进行更改以进行测试。...Redux DevTools[33] 是另一个 Chrome 扩展，可增强我们的 Redux 开发工作流程。它提供了对 Redux 存储的洞察，允许我们检查操作和状态更改，回溯和重放操作等。.../docs/start [18] Material-UI: https://mui.com/material-ui/getting-started/ [19] Mantine: https://mantine.dev

6721 0

独立开发者必备的29个开源React后台管理模板

演示地址：https://skote-v-light.react.themesbrand.com/dashboard 5.Fuse - React Admin Template Redux Material...Fuse React是一个完整的React管理模板，遵循谷歌的材料设计指南。 Fuse React管理模板使用Material UI作为主要UI库，同时使用Redux进行状态管理。...Ammie - React Admin Template Ammie是一个基于React组件的反应管理模板，也是使用Material UI框架创建的最佳反应管理模板。...其中一些流行的库是Material-UI、Redux、Redux-Saga、ReCharts、React Big Calendar等等。...直接可用的小部件使您可以灵活地在仪表板和其他页面上显示多个详细信息。如果您正在构建SAAS产品，请购买扩展许可证。

5K1 0

你要的 React 面试知识点，都在这了

React将整个DOM副本保存为虚拟DOM ? 每当有更新时，它都会维护两个虚拟DOM，以比较之前的状态和当前状态，并确定哪些对象已被更改。例如，段落文本更改为更改。 ?...Redux connect是高阶组件的示例。这是一种用于生成可重用组件的强大技术。 Props 和 State Props 是只读属性，传递给组件以呈现UI和状态，我们可以随时间更改组件的输出。...当Redux状态更改时，连接到Redux的组件将接收新的状态作为props。当组件接收到这些props时，它将进入更新阶段并重新渲染 UI。 ?...错误边界有两个作用如果发生错误，显示回退UI 记录错误下面是ErrorBoundary类的一个例子。...如果这些组件中发生任何错误，我们会记录错误并显示回退UI。 import React from 'react'; import '..

18.5K2 0

年终盘点: 复盘20+基于React的开源管理后台&插件

项目特点：适应任何后端(REST、GraphQL、SOAP等) 技术栈包括material-ui, redux, react-final-form, redux-saga, react-router,...并且是一个 React样式库,可以帮助你很快构建漂亮的UI。框架性能：追求性能体验，MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K。...MUI (Material-UI) React 组件。完全响应式，所有现代浏览器都支持。...它是基于Redux架构的,提供了一种在React应用中高效管理状态的方式。声明式设计：React 使创建交互式 UI 变得轻而易举。...16.Notus React Notus React 是免费和开源的。它不会更改 Tailwind CSS 中的任何 CSS。

1.2K1 0

Angular vs React 最全面深入对比

它与RxJS的集成允许您利用推送更改检测策略获得更好的性能。...React Native React Native 是Facebook开发的基于React在移动端的开发平台，借助此平台，React可以创建真正的Native的UI。...Material UI 还有一个可用于React的Material Design Component。与Angular的版本相比，这个版本比较成熟，可以使用更广泛的组件。...不像Redux那样将状态保存在一个不可变的存储中，它鼓励您仅存储最低限度的必需状态，并从其中获取剩余的数据。它提供了一组装饰器来定义可观察和观察者，并将反应逻辑引入到你的状态管理代码中。...Storybook Storybook是React的组件开发环境。它允许您快速设置单独的应用程序来显示您的组件。除此之外，它提供了许多附加组件来记录，开发，测试和设计您的组件。

3.8K7 0

React 学习路线图 2018版

SCSS ·PostCSS ·Less ·Stylus CSS 框架 ·Bootstrap ·Materialize、Material...UI、Material Design Lite ·Bulma ·Semantic UI CSS 架构 ·BEM ·CSS Modules...a.异步 actions (副作用) ·Redux Thunk ·Redux Better Promise ·Redux...Form ○Formik ○Formsy ○Final Form 9.路由 ○React-Router ○Router5 ○Redux-First Router...之后就会打开思维导图，修改之后上传后更新 README 的 PNG 图片 (需要导出)，然后提交 PR 。提交 PR 以帮助改进在 issues 中进行讨论想法帮忙宣传

2.4K4 1

优化 React APP 的 10 种方法

在文本框中输入2并Click Me连续单击按钮，我们将看到ReactComponent将被重新渲染一次，并且永远不会被渲染。它将上一个道具和状态对象的字段与下一个道具和状态对象的字段进行浅层比较。...由于Redux实行不变性，这意味着每次操作分派时都会创建新的对象引用。这将影响性能，因为即使对象引用发生更改但字段未更改，也会在组件上触发重新渲染。...重新选择库封装了Redux状态并检查该状态的字段，并告诉React什么时候渲染或不渲染字段。...因此，重新选择可通过浅遍遍遍prev和当前Redux状态字段来检查宝贵的时间，尽管它们具有不同的内存引用，但它们是否已更改。...如果我们在输入文本框中输入一个值并按下Click Me按钮，则将呈现输入中的值。

33.9K2 0

【19】进大厂必须掌握的面试题-50个React面试

等）集成使用React，编写UI测试用例变得非常容易 5....无论何时任何基础数据发生更改，整个UI都将以虚拟DOM表示形式重新呈现。然后计算先前的DOM表示和新的DOM表示之间的差异。...组件是React应用程序UI的构建块。这些组件将整个UI分成独立且可重用的小块。然后，它使这些组件中的每个组件彼此独立，而不会影响UI的其余部分。 12.解释React中render（）的目的。...商店–整个应用程序的状态/对象树保存在商店中。查看–仅显示商店提供的数据。 40.显示数据如何流过Redux？等你来回答。 41.在Redux中如何定义动作？...43.在Redux中存储的意义是什么？商店是一个JavaScript对象，它可以保存应用程序的状态并提供一些帮助程序方法来访问状态，调度动作和注册侦听器。应用程序的整个状态/对象树保存在单个存储中。

11.2K3 0

React全家桶简介

（注：React也提供了shouldComponentUpdate生命周期回调，来减少数据变化后不必要的Virtual DOM对比过程。）...这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。...Store Store 是Redux中的主要概念，是保存数据的地方，它实际上是一个Object tree。整个应用只能有一个 Store。...Redux store 保存了根 reducer 返回的完整 state 树。 ? Connect React-Redux 提供connect方法，用于从 UI 组件生成容器组件。...react-router 安装 npm install --save react-router-dom React UI库知名的库有：Ant Design,Material UI 二、React使用简介

2K1 0

2022 年的 React 生态

以下所有的UI组件库都带有基本组件，如 Buttons、Dropdowns、Dialogs 和 Lists： Material UI (MUI) (最流行)：https://material-ui.com...例如 react-table-library 提供了非常强大的表格组件，同时提供了主题（例如 Material UI），可以很好的和流行的UI组件库兼容。...你也可以将它集成到编辑器或IDE中，以便在每次保存文件的时候自动对代码进行格式化。虽然 Prettier 不能取代 ESLint，但它可以很好地与 ESLint 集成。...通常还需要一些其他功能，例如密码重置和密码更改功能。这些能力远远超出了 React 的范畴，我们通常会把它们交给服务端去管理。...如果存在差异，Jest 将发出警告，你要么接受这个快照，要么更改一下组件的实现。

5.8K2 0

向钢铁侠学习怎样开发软件

就像你第一次尝试创建的某些东西一样，大多数代码都足以显示某些内容并满足你的基本目的。点击一个 90 年代风格的按钮并很酷的打开一个显示着 Hello World 的弹出窗口，这真的是你想要的东西吗？...Bulma Daemonite’s Material (基于Google的Material Design) 你可以通过阅读 Google 的 UI/UX 案例研究和指南，学习设计适合绝大多数设备和用例的用户界面...设定一些条件，以便在检测到状态更改时，表单的某些元素能够被禁用和隐藏。例如，如果表单状态设置为“登录”，则不应显示密码确认和全名字段，并且必须将文本更改为“登录”。...我建议的一些好的bootstrap存储库是：基础 React(https://github.com/facebook/create-react-app) 高级React（使用路由器，Redux，Express...后端）(https://github.com/flexdinesh/react-redux-boilerplate) Django，Flask 和其他一些框架都有自己的 Boilerplate，这是很好的起点

7713 0

react新手demo——TodoList

大家可以clone下来查看：react-todolist 这篇文章我们就不使用 redux，因为这个 demo 本身比较简单，不需要通过 redux 来管理我们的状态。...安装完依赖后，我们在.babelrc文件中引入这几个依赖 { "presets": ["es2015","react",'stage-0'] } 其次为了当我们每次添加list...中常说的智能组件，得到数据lists后通过 map 方法遍历数据，然后进行渲染。...一个时更改状态，一个是删除。...---- 9，参考资料 React 入门实例教程 Redux 入门教程（一）：基本用法 webpack中文网 React创建组件的三种方式及其区别作者：darrell

1K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云