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

如何使用Redux表单访问React中动态命名字段的值?

在React中使用Redux表单访问动态命名字段的值可以通过以下步骤实现:

  1. 首先,确保已经安装了redux和react-redux库,并在项目中引入它们。
  2. 创建一个Redux store来管理应用的状态。可以使用redux的createStore函数来创建store,并将reducer传递给它。reducer是一个纯函数,用于处理不同的action并更新状态。
  3. 在reducer中定义初始状态对象,该对象包含动态命名字段的初始值。可以使用ES6的计算属性名来实现动态命名字段。
  4. 创建一个action来更新动态命名字段的值。action是一个简单的JavaScript对象,包含一个type属性和payload属性。payload属性用于传递新的字段值。
  5. 在组件中使用connect函数将Redux store连接到React组件。这样可以在组件中访问store中的状态和操作。
  6. 在组件中使用mapStateToProps函数将store中的状态映射到组件的props上。这样就可以通过props访问动态命名字段的值。
  7. 在组件中使用mapDispatchToProps函数将action创建函数映射到组件的props上。这样就可以通过props调用action来更新动态命名字段的值。

下面是一个示例代码:

代码语言:txt
复制
// 1. 引入redux和react-redux库
import { createStore } from 'redux';
import { connect, Provider } from 'react-redux';

// 2. 创建Redux store
const initialState = {
  dynamicFields: {} // 动态命名字段的初始值
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return {
        ...state,
        dynamicFields: {
          ...state.dynamicFields,
          [action.payload.fieldName]: action.payload.fieldValue
        }
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

// 3. 创建action
const updateField = (fieldName, fieldValue) => ({
  type: 'UPDATE_FIELD',
  payload: {
    fieldName,
    fieldValue
  }
});

// 4. 连接Redux store到React组件
const mapStateToProps = state => ({
  dynamicFields: state.dynamicFields
});

const mapDispatchToProps = dispatch => ({
  updateField: (fieldName, fieldValue) =>
    dispatch(updateField(fieldName, fieldValue))
});

// 5. React组件
const MyComponent = ({ dynamicFields, updateField }) => {
  const handleInputChange = (fieldName, event) => {
    const fieldValue = event.target.value;
    updateField(fieldName, fieldValue);
  };

  return (
    <div>
      {Object.entries(dynamicFields).map(([fieldName, fieldValue]) => (
        <input
          key={fieldName}
          value={fieldValue}
          onChange={event => handleInputChange(fieldName, event)}
        />
      ))}
    </div>
  );
};

// 6. 使用connect函数连接Redux store和React组件
const ConnectedComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

// 7. 渲染根组件
const App = () => (
  <Provider store={store}>
    <ConnectedComponent />
  </Provider>
);

export default App;

在上述示例中,我们创建了一个Redux store来管理动态命名字段的值。通过connect函数将store连接到React组件,并使用mapStateToProps函数将状态映射到组件的props上。同时,使用mapDispatchToProps函数将action创建函数映射到组件的props上,以便在组件中调用更新字段值的action。最后,在组件中通过props访问和更新动态命名字段的值。

请注意,这只是一个简单的示例,实际应用中可能需要根据具体需求进行适当的修改和扩展。

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

相关·内容

React面试八股文(第一期)

受控组件更新state流程:可以通过初始state设置表单默认每当表单发生变化时,调用onChange事件处理器事件处理器通过事件对象e拿到改变后状态,并更新组件state一旦通过setState...方法更新state,就会触发视图重新渲染,完成表单组件更新受控组件缺陷: 表单元素都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部就必须每个都要编写事件处理函数...(2)非受控组件 如果一个表单组件没有value props(单选和复选按钮对应是checked props)时,就可以称为非受控组件。在非受控组件,可以使用一个ref来从DOM获得表单。...遍历子节点时候,不要用 index 作为组件 key 进行传入如何有条件地向 React 组件添加属性?对于某些属性,React 非常聪明,如果传递给它是虚,可以省略该属性。...万一下次别人要移除它,就得去 mixin 查找依赖多个 mixin 可能存在相同命名函数,同时代码组件也不能出现相同命名函数,否则就是重写了,其实我一直觉得命名真的是一件麻烦事。。

3K30

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

这有助于维持单向数据流,通常用于呈现动态生成数据。 15. React状态是什么,如何使用? 状态是React组件核心。状态是数据来源,必须保持尽可能简单。...每个事件类型都包含其自己属性和行为,这些属性和行为只能通过其事件处理程序进行访问。 23.如何React创建事件?...在React如何创建表单React表单类似于HTML表单。但是在React,状态包含在组件state属性,并且只能通过setState()进行更新。...此功能可以完全访问用户输入到表单数据。...商店–整个应用程序状态/对象树保存在商店。 查看–仅显示商店提供数据。 40.显示数据如何流过Redux? 等你来回答。 41.在Redux如何定义动作?

11.1K30

2021前端react面试题汇总

react官方推荐使用受控表单组件。...受控组件更新state流程: 可以通过初始state设置表单默认 每当表单发生变化时,调用onChange事件处理器 事件处理器通过事件对象e拿到改变后状态,并更新组件state 一旦通过...setState方法更新state,就会触发视图重新渲染,完成表单组件更新 受控组件缺陷: 表单元素都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部就必须每个都要编写事件处理函数...(2)非受控组件 如果一个表单组件没有value props(单选和复选按钮对应是checked props)时,就可以称为非受控组件。在非受控组件,可以使用一个ref来从DOM获得表单。...Reactrefs作用是什么?有哪些应用场景? Refs 提供了一种方式,用于访问在 render 方法创建 React 元素或 DOM 节点。

2.3K00

2021前端react面试题汇总

react官方推荐使用受控表单组件。...受控组件更新state流程: 可以通过初始state设置表单默认 每当表单发生变化时,调用onChange事件处理器 事件处理器通过事件对象e拿到改变后状态,并更新组件state 一旦通过...setState方法更新state,就会触发视图重新渲染,完成表单组件更新 受控组件缺陷: 表单元素都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部就必须每个都要编写事件处理函数...(2)非受控组件 如果一个表单组件没有value props(单选和复选按钮对应是checked props)时,就可以称为非受控组件。在非受控组件,可以使用一个ref来从DOM获得表单。...Reactrefs作用是什么?有哪些应用场景? Refs 提供了一种方式,用于访问在 render 方法创建 React 元素或 DOM 节点。

1.9K20

2022前端社招React面试题 附答案

受控组件更新state流程: 可以通过初始state设置表单默认 每当表单发生变化时,调用onChange事件处理器 事件处理器通过事件对象e拿到改变后状态,并更新组件state 一旦通过...setState方法更新state,就会触发视图重新渲染,完成表单组件更新 受控组件缺陷: 表单元素都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部就必须每个都要编写事件处理函数...(2)非受控组件 如果一个表单组件没有value props(单选和复选按钮对应是checked props)时,就可以称为非受控组件。在非受控组件,可以使用一个ref来从DOM获得表单。...Reactrefs作用是什么?有哪些应用场景? Refs 提供了一种方式,用于访问在 render 方法创建 React 元素或 DOM 节点。...当在父组件需要访问子组件 ref 时可使用传递 Refs 或回调 Refs。 9. React组件构造函数有什么作用?它是必须吗?

1.7K40

「首席架构师推荐」React生态系统大集合

valuelink - 具有扩展React链接全功能双向数据绑定 wingspan-forms - Facebook React动态表单库 newforms - React同构形式处理 formjs...- Reactjs表单生成器 react-form-builder - React.js表单生成器 plexus-form - 使用JSON-Schema进行React动态表单组件 tcomb-form...- 在React中生成复杂,经过验证和扩展基于JSON表单 Redux-Autoform - 从元数据动态创建Redux-Forms uniforms - 一堆React组件和帮助器,可以轻松生成和验证表单...React - React形式 - React角状React形式 unform - ReactJS表单库,用于创建不受控制表单结构,包含嵌套字段,验证等等!...- 一个简单redux中间件,用于使用JSON Schema验证redux状态和对象类型 redux-persist - 坚持并补充redux商店 Redux教程 在ES6使用ReactRedux

12.3K30

美团前端二面经典react面试题总结_2023-03-01

这个问题就设计到了数据持久化, 主要实现方式有以下几种: Redux: 将页面的数据存储在redux,在重新加载页面时,获取Redux数据; data.js: 使用webpack构建项目,可以建一个文件...在 React,组件负责控制和管理自己状态。 如果将HTML表单元素( input、 select、 textarea等)添加到组件,当用户与表单发生交互时,就涉及表单数据存储问题。...表单如何呈现由表单元素自身决定。 如下所示,表单并没有存储在组件状态,而是存储在表单元素,当要修改表单数据时,直接输入表单即可。有时也可以获取元素,再手动修改它。...当要获取表单数据时,要首先获取表单元素,然后通过表单元素获取元素。 注意:为了方便在组件获取表单元素,通常为元素设置ref属性,在组件内部通过refs属性获取对应DOM元素。...我们将它们称为纯组件,因为它们可以接受任何动态提供子组件,但它们不会修改或复制其输入组件任何行为。

1.4K20

腾讯前端二面常考react面试题总结

React,组件负责控制和管理自己状态。 如果将HTML表单元素( input、 select、 textarea等)添加到组件,当用户与表单发生交互时,就涉及表单数据存储问题。...表单如何呈现由表单元素自身决定。 如下所示,表单并没有存储在组件状态,而是存储在表单元素,当要修改表单数据时,直接输入表单即可。有时也可以获取元素,再手动修改它。...当要获取表单数据时,要首先获取表单元素,然后通过表单元素获取元素。 注意:为了方便在组件获取表单元素,通常为元素设置ref属性,在组件内部通过refs属性获取对应DOM元素。...触发,异步任务(通常都是业务或获取数据任务)也不例外,而为了不将业务或数据相关任务混入React组件,就需要使用其他框架配合管理异步任务流程,如redux-thunk,redux-saga等; Mobx...如何有条件地向 React 组件添加属性? 对于某些属性,React 非常聪明,如果传递给它是虚,可以省略该属性。

1.5K40

React组件设计实践总结02 - 组件组织

: T) => void; } 这样做好处: 接近原生表单元素原语. 自定义表单组件一般不需要封装到 event 对象 几乎所有组件库自定义表单使用这种 API....这使得我们自定义组件可以和第三方库兼容, 比如antd 表单验证机制 更容易被动态渲染. 因为接口一致, 可以方便地进行动态渲染或集中化处理, 减少代码重复 回显问题....在实际 React 开发, 非受控组件场景非常少, 我认为自定义组件都可以忽略这种需求, 只提供完全受控表单组件, 避免组件自己维护缓存状态 ---- 4....在这个项目的实际开发, 我做法是创建一个 FormStore Context 组件, 下级组件通过这个 context 来统一存储数据. 另外我决定使用配置方式, 来渲染动态这些表单...., 根据配置表单类型渲染表单组件, 从FormStore获取和存储 */} )} ---- 8.

1.9K31

react常见考点

万一下次别人要移除它,就得去 mixin 查找依赖多个 mixin 可能存在相同命名函数,同时代码组件也不能出现相同命名函数,否则就是重写了,其实我一直觉得命名真的是一件麻烦事。。...React严格模式如何使用,有什么用处?StrictMode 是一个用来突出显示应用程序潜在问题工具。与 Fragment 一样,StrictMode 不会渲染任何可见 UI。...当用户提交表单时,前面提到元素将随表单一起被发送。...但在 React 中会有些不同,包含表单元素组件将会在 state 追踪输入,并且每次调用回调函数时,如 onChange 会更新 state,重新渲染组件。...一个输入表单元素,它通过 React 这种方式来控制,这样元素就被称为"受控元素"。React key 是干嘛用 为什么要加?

1.3K10

React 组件优化

+ redux 应用时,reducer state 如果是一个引用类型,比如数组或者对象,当往数组 push 新项时,我们必须要克隆一份才行,如果不克隆,react 会认为 state 并没有更新...Formik 工具库 Formik 库可以让你在 React 轻松构建出健壮 Form 表单程序。...使用时需要先下载: npm install formik --save Formik 库可以与 yup 库一块使用,库作者也推荐搭配使用,yup 是一个用于验证字段库,它用法类似于 React ...* as Yup from "yup"; // 字段名应与表单元素 name 相同 const initialValues = { nickname: "", email: ""...在 Formik 官网,作者也举例了使用 redux-form 缺陷: 表单状态本质上是短暂和局部,并不需要 redux 对其进行跟踪; 使用 redux 管理状态时,状态更新要派发 action

7.2K20

滴滴前端高频react面试题总结

通过引用而不是使用命名组件displayName。...通过 subscribe(listener) 返回函数处理 listeners 注销如何使用4.0版本 React Router?...在 React,组件负责控制和管理自己状态。如果将HTML表单元素( input、 select、 textarea等)添加到组件,当用户与表单发生交互时,就涉及表单数据存储问题。...表单如何呈现由表单元素自身决定。如下所示,表单并没有存储在组件状态,而是存储在表单元素,当要修改表单数据时,直接输入表单即可。有时也可以获取元素,再手动修改它。...当要获取表单数据时,要首先获取表单元素,然后通过表单元素获取元素。注意:为了方便在组件获取表单元素,通常为元素设置ref属性,在组件内部通过refs属性获取对应DOM元素。

3.9K20

【愚公系列】2023年03月 其他-Web前端基础面试题(react专项_35道)

15、当调用setState时,React render 是如何工作 16、React key 重要性是什么? 17、什么是Redux?...23、React严格模式如何使用,有什么用处? 24、React什么是受控组件和非控组件? 25、React和vue.js相似性和差异性是什么? 26、React组件生命周期不同阶段是什么?...react官方推荐使用受控表单组件。...受控组件更新state流程: 可以通过初始state设置表单默认 每当表单发生变化时,调用onChange事件处理器 事件处理器通过事件对象e拿到改变后状态,并更新组件state...(2)非受控组件 如果一个表单组件没有value props(单选和复选按钮对应是checked props)时,就可以称为非受控组件。在非受控组件,可以使用一个ref来从DOM获得表单

7.6K10

校招前端经典react面试题(附答案)

分析当前页面的依赖包,是否存在不合理性,如果存在,找到优化点并进行优化Redux实现原理解析为什么要用reduxReact,数据在组件是单向流动,数据从一个方向父组件流向子组件(通过props)...在 React,组件负责控制和管理自己状态。如果将HTML表单元素( input、 select、 textarea等)添加到组件,当用户与表单发生交互时,就涉及表单数据存储问题。...表单如何呈现由表单元素自身决定。如下所示,表单并没有存储在组件状态,而是存储在表单元素,当要修改表单数据时,直接输入表单即可。有时也可以获取元素,再手动修改它。...当要获取表单数据时,要首先获取表单元素,然后通过表单元素获取元素。注意:为了方便在组件获取表单元素,通常为元素设置ref属性,在组件内部通过refs属性获取对应DOM元素。...使用 Flux 模式复杂用户界面不再遭受级联更新,任何给定React 组件都能够根据 store 提供数据重建其状态。Flux 模式还通过限制对共享数据直接访问来加强数据完整性。

2.1K20

(译) 如何使用 React hooks 获取 api 接口数据

原文地址:robinwieruch 全文使用意译,不是重要我就没有翻译了 在本教程,我想向你展示如何使用 state 和 effect 钩子在React获取数据。...它将引导您完成使用React类组件数据获取,如何使用Render Prop 组件和高阶组件来复用这些数据,以及它如何处理错误以及 loading 。...状态和状态更新函数来自useState hook。他是来负责管理我们这个 data 状态。userState 第一个是data 初始。其实就是个解构赋值。...但是,如果你对错误处理、loading、如何触发从表单获取数据或者如何实现可重用数据获取钩子。请继续阅读。 如何自动或者手动触发 hook?...说白了,界面给用户反馈更加友好 使用 React Form 表单获取数据(Fetching Data with Forms and React) function App() { ...

28.4K20

精读《React 高阶组件》

它本身并不是 React API,而是一种 React 组件设计理念,众多 React 库已经证明了它价值,例如耳熟能详 react-redux。...Props Proxy 作为一层代理,具有隔离作用,因此传入 WrappedComponent ref 将无法访问到其本身,需要在 Props Proxy 内完成中转,具体可参考以下代码,react-redux...Form 灵活多变,从功能上看,表单校验可能为单组件校验,也可能为全表单校验,可能为常规检验,比如:非空、输入限制,也可能需要与服务端配合,甚至需要根据业务特点进行定制。...至于 HOC 在 Form 上具体实现,首先将表单组件(Input、Selector...)与相应 validator 与组件回调函数名(trigger)传入 Decorator,将 validator...现在我们需要对一个表单所有提交到后端进行校验,根据后端返回,分别列出各项校验错误信息,就需要借助相应项 setError 去完成了。

48030

前端react面试题(必备)2

props不可以变性就保证相同输入,页面显示内容是一样,并且不会产生副作用为什么使用jsx组件没有看到使用react却需要引入react?...文件即后缀名为 ‘.tsx’(例如 src/index.js 重命名为 src/index.tsx )Redux 异步请求怎么处理可以在 componentDidmount 中直接进⾏请求⽆须借助...受控组件是 React 控制组件,并且是表单数据真实唯一来源。非受控组件是由 DOM 处理表单数据地方,而不是在 React 组件。...这样做主要原因是受控组件支持即时字段验证,允许有条件地禁用/启用按钮,强制输入格式。概述一下 React事件处理逻辑。...这样 React在更新DOM时就不需要考虑如何处理附着在DOM上事件监听器,最终达到优化性能目的。

2.3K20
领券