React-Redux系列3:修改Store state的值
React 系列 修改 State redux Store
2023-09-11 14:19:06 时间
目前为止的ToDoList案例已经可以正常展示,但是还不能修改编辑,如下所示
此时控制台报错提示,缺少onChange响应事件,所以接下来编写响应事件,改变state状态值。
(1)通常做法
之前的做法都是绑定具体方法进行调用,如下所示,绑定handleInput方法,当输入值时进行输出打印
接下来如果想利用react-redux的connect进行简化,则需要进行映射,类似于state的关系映射
(2)编写映射
将handleInput方法直接写入方法映射的返回值里,然后将connect()的第二个参数改为该映射
接着改变方法绑定
此时的this方法绑定便也不再需要,测试如下(控制台可以正常输出打印输入的数据)
接下来就差最后一步,派发action,进行状态更改
然后编写reducer.js进行逻辑处理
此时便可以实现输入框的编辑
.
相关文章
- [Web前端] WEEX、React-Native开发App心得 (转载)
- react的3种组件
- [React] Use react styled system with styled components
- [React] Display Computed Data Using Recoil Selectors in React
- [React Testing] Test react-router-dom Router Provider with createMemoryHistory
- [React] Return a list of elements from a functional component in React
- [React] Use Prop Collections with Render Props
- [React] Forward a DOM reference to another Component using forwardRef in React 16.3
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- [React] Use react styled system with styled components
- [React] Using react-styleguidist for Component demo
- [React Testing] Test Drive Mocking react-router’s Redirect Component on a Form Submission
- [React Testing] Debug the DOM State During Tests using React Testing Library’s debug Function
- [React] Close the menu component when click outside the menu
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
- [React Intl] Install and Configure the Entry Point of react-intl
- [React Fundamentals] Introduction to Properties
- [React Native] Complete the Notes view
- [React Flow] Up and Running with Facebook Flow for Typed JavaScript
- [Redux] React Todo List Example (Toggling a Todo)
- [React + webpack] hjs-webpack
- [React] React -- Hello World
- React的source code init时会自动检测Chrome dev tool的react extension装了没
- react读书笔记
- React(二)react脚手架的搭建
- 【taro react】---- 编译微信小程序后报错:Error: Minified React error #321;