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

如何在redux中获取<Field>值-form 7.0.0

在redux中获取<Field>值,需要使用redux-form库来处理表单数据。redux-form是一个用于处理表单状态的Redux扩展库,它提供了一种简单的方式来管理表单数据,并将其存储在Redux store中。

以下是在redux中获取<Field>值的步骤:

  1. 首先,确保你已经安装了redux-form库,并将其集成到你的应用程序中。
  2. 在你的Redux store中,使用redux-form的reducer来处理表单数据。你可以通过将formReducer导入并添加到你的根reducer中来实现这一点。
代码语言:javascript
复制
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  form: formReducer
});

export default rootReducer;
  1. 在你的组件中,使用redux-form的Field组件来渲染表单字段。Field组件接受一个name属性,用于指定字段的名称。
代码语言:javascript
复制
import React from 'react';
import { Field } from 'redux-form';

const MyForm = () => {
  return (
    <form>
      <div>
        <label htmlFor="firstName">First Name</label>
        <Field name="firstName" component="input" type="text" />
      </div>
      {/* 其他表单字段 */}
    </form>
  );
};

export default MyForm;
  1. 在你的组件中,使用redux-form的connect函数来连接表单组件到Redux store。这将使表单组件能够访问Redux store中的表单数据。
代码语言:javascript
复制
import React from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';

const MyForm = (props) => {
  // 通过props获取表单值
  const { handleSubmit, pristine, submitting, values } = props;

  const onSubmit = (data) => {
    // 处理表单提交
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <Field name="firstName" component="input" type="text" />
      </div>
      {/* 其他表单字段 */}
      <button type="submit" disabled={pristine || submitting}>
        Submit
      </button>
    </form>
  );
};

// 使用reduxForm高阶函数包装表单组件
const MyFormContainer = reduxForm({
  form: 'myForm' // 表单名称
})(MyForm);

// 使用connect函数连接表单组件到Redux store
export default connect()(MyFormContainer);

现在,你可以在<Field>组件中使用name属性来指定字段的名称,并通过props获取表单值。例如,你可以在onSubmit函数中访问values属性来获取整个表单的值。

这是一个基本的示例,你可以根据你的具体需求进行调整和扩展。关于redux-form的更多详细信息和用法,请参考redux-form官方文档

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

相关·内容

redux-form的学习笔记二--实现表单的同步验证

)//写入的redux-form组件 1什么是Field组件?...Field组件是redux-form组件库的核心组件,它位于你的输入框(input)或输入框组件的外一层,将其包装起来从而使输入框能和redux的store直接连接起来。...} label="Username"/> 在上面的Fieldname和component是必填的,而type属性和label属性是选填的,但选填的属性(type和label)可通过props属性传入它的...component,比如以上的renderField 2Field组件的name属性和component属性 name属性是Filed组件的名称,也即Field下输入框的名称,它将成为存储form表单数据的...如果表单初始化后尚未输入,为true,否则为false,当你向表单第一个输入框输入的时候,pristine就由true转为false了 reset是一个函数,调用reset()可清空表单 submitting

1.8K50
  • 何在 WPF 获取所有已经显式赋过的依赖项属性

    获取 WPF 的依赖项属性的时,会依照优先级去各个级别获取。这样,无论你什么时候去获取依赖项属性,都至少是有一个有效的。有什么方法可以获取哪些属性被显式赋值过呢?...本文介绍如何获取以及显式赋值过的依赖项属性。 ---- 需要用到 DependencyObject.GetLocalValueEnumerator() 方法来获得一个可以遍历所有依赖项属性本地。...} } 这里的 value 可能是 MarkupExtension 可能是 BindingExpression 还可能是其他一些可能延迟计算的提供者。...因此,你不能在这里获取到常规方法获取到的依赖项属性的真实类型的。 但是,此枚举拿到的所有依赖项属性的都是此依赖对象已经赋值过的依赖项属性的本地。如果没有赋值过,将不会在这里的遍历中出现。

    19040

    redux-form的学习笔记

    :formReducer } 然后通过redux-form的接口,就可以实现在表单输入的内容与state对象form表单数据的同步了 我下面将写两个文件index.js和form.js代码见下图红色标题的下方...{ reducer as formReducer } from 'redux-form' // 导入我的form表单组件,位于同一目录下的form.js文件 import ContactForm from...的中文文档:http://www.redux.org.cn/docs/api/index.html 3第三步要做的是写一个form组件的js文件,在这个文件里: 在文件顶部通过 import { Field..., reduxForm//或者其他的组件 } from 'redux-form';         引入必要的redux-form表单组件,比如Field,Fields,FormSection等 然后在文件最下方写入...我的form.js如下: import React from 'react' import { Field, reduxForm } from 'redux-form' const SimpleForm

    1K90

    带你用React从零实现一个Antd4 Form表单

    但是我们需要考虑的一点就是,如果这些input、radio组件等都各自管理自己的state,那么Form表单提交的时候,怎么做统一的收据收集呢,毕竟校验和提交Form表单的时候需要获取Form表单全部的数据...还有一种统一管理Form状态的方式,就是自己再定义一个单独的数据管理仓库,然后规定这个数据仓库的get、set方法就好了,有点类似redux。...> ); } 复制代码 子组件消费value,Form中都用Field包裹子组件input、value等: import React, {Component} from "react"; import...那么现在我们其实要做的就是加上注册组件更新,监听this.store,一旦this.store的某个改变,就更新对应的组件。...而表单校验的依据就是Field的rules,接下来我们可以做个简单的校验,只要不是null、undefined或者空字符串,就当做校验通过,否则的话就往err数组push错误信息。

    1.3K20

    2023 React 生态系统,以及我的一些吐槽……

    Redux Toolkit 还包括一个强大的数据获取和缓存功能,我们将其称为 "RTK Query"。它作为一个独立的入口点包含在软件包。它是可选的,但可以消除手动编写数据获取逻辑的需求。...服务器状态管理 tanstack query TanStack Query(前身为 React Query)经常被描述为 Web 应用程序缺失的数据获取库,但更具技术性的说法是,它使得在 Web 应用程序获取...RTK Query 从先驱解决数据获取问题的其他工具( Apollo Client、React Query、Urql 和 SWR)获得灵感,但在其 API 设计增加了独特的方法: 数据获取和缓存逻辑是构建在...由于大约有 30 个独特的表单,很快就明显发现,我们可以通过标准化不仅是输入组件,还有数据在表单的流动方式来获益。 为什么不使用 Redux-Form?...Redux-Form 在每次按键时都会多次调用整个顶层 Redux reducer。

    70730

    可以但没必要?分享 20 个 JavaScript 库,打开视野👀

    Immutable.js 如今 React+Redux+Immutable.js 的组合已在项目中广泛应用,但对于 Vue 技术栈的同学们来说,认知 immutable-js 也同样关键且必要。...Redux.js Redux 并非 React 人专用,它借用函数式编程思想,旨在提供可预测的状态管理; 具体的,在 Redux 的 state 没有 setter 方法,取而代之的是:state 经过一个接一个的...reducer 函数计算后得,state 只读,不可修改; 这正是 FP 把原始不可变的数据放入不同函数组合成的管道进行计算 的思想!...Final Form 轻松创建漂亮且易于表单的库; 当表单状态更改时,React Final Form 能重新渲染仅需要更新的组件: import { Form, Field } from 'react-final-form...here it is */ width: 100px; height: 100px; } 关键:background-attachment: fixed 将背景扩展到视口的大小并在每个元素显示适当的块

    2.3K20

    React知识图谱

    使用场景react-redux的connect。 useContext 接收一个 context 对象(React.createContext 的返回)并返回该 context 的当前。...使用场景Antd4 Form实现useForm的时候。 useImperativeHandle useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例。...使用场景Antd4 Form实现Form的时候。 状态管理库 redux:函数式编程 redux是JavaScript应用的状态容器。它保证程序行为一致性且易于测试。...• createStore 创建store • reducer 初始化、修改状态函数 • getState 获取状态 • dispatch 提交更新 • subscribe 变更订阅 • 常见中间件...MemoryRouter:把 URL 的历史记录保存在内存的 (不读取、不写入地址栏)。在测试和非浏览器环境很有用,React Native。

    33920

    React useReducer 终极使用教程

    懒惰创建初始 state 在编程概念,懒初始化是延迟创建对象的一种手段,类似于直到被需要的第一时间才去创建,还有其他的动作比如的计算或者高昂的计算开销。...onChangeText 方法,这个时候通过 changeFirstName 函数,改变changeFirstName,进而改变value。...当你的应用需要单一的来源时 当前端的应用通过接口获取数据,且这个数据源就是从这个接口获取的,这个时候使用Redux 可以更方便的管理我们的state,就像是写一个todo/undo demo,直接可以使用...Redux。...当你需要一个更可预测的状态 当你的应用运行在不同的环境时,使用Redux可以使得state的管理变得更稳定。同样的state和action传到reducer的时候,会返回相同的结果。

    3.6K10

    何在MySQL获取的某个字段为最大和倒数第二条的整条数据?

    在MySQL,我们经常需要操作数据库的数据。有时我们需要获取的倒数第二个记录。这个需求看似简单,但是如果不知道正确的SQL查询语句,可能会浪费很多时间。...在本篇文章,我们将探讨如何使用MySQL查询获取的倒数第二个记录。 一、查询倒数第二个记录 MySQL中有多种方式来查询倒数第二个记录,下面我们将介绍三种使用最广泛的方法。...ID(或者其他唯一)。...SELECT * FROM table_name WHERE id=(SELECT MAX(id)-1 FROM table_name) 这种方法使用子查询来获取倒数第二条记录,可以直接获取到结果。...SELECT * FROM commodity ORDER BY price ASC LIMIT 1; 结论 在MySQL获取的倒数第二条记录有多种方法。

    1.1K10

    Taro 小程序开发大型实战(四):使用 Hooks 版的 Redux 实现应用状态管理(上篇)

    提示 我们将马上在之后讲解如何在组件 dispatch Action。...useSelector Hooks useSelector 允许你使用 selector 函数从一个 Redux Store 获取数据。...•接着我们将之前从 props 里面获取到的 nickName 和 avatar 替换成我们从 Redux store 里面获取到状态,这里我们为了用户体验,从 taro-ui 中导出了一个 AtAvatar...•接着我们使用 useSelector 取到我们需要的 nickName 属性,用于进行双取反转换成布尔 isLogged,表示是否登录。...•接着我们将之前从父组件获取的 props.isLogged 属性替换成新的从 isLogged •接着,我们去掉 ”普通登录” 按钮上不再需要的 handleClick 属性和 “微信登录”、“支付宝登录

    2.2K21

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

    原文地址:robinwieruch 全文使用意译,不是重要的我就没有翻译了 在本教程,我想向你展示如何使用 state 和 effect 钩子在React获取数据。...userState 的第一个是data 的初始。其实就是个解构赋值。 这里我们使用 axios 来获取数据,当然,你也可以使用别的开源库。...但是,如果你对错误处理、loading、如何触发从表单获取数据或者如何实现可重用的数据获取的钩子。请继续阅读。 如何自动或者手动的触发 hook?...但是这个例子,只有当你的 url 发生变化了,才会再次去获取数据。...说白了,界面给用户反馈更加的友好 使用 React Form 表单获取数据(Fetching Data with Forms and React) function App() { ...

    28.5K20

    基于eos的Dapp开发--元素战争(三)

    在frontend文件夹我们可以看到.env文件,它用来存储一些变量的地方,类似于环境变量: REACT_APP_EOS_HTTP_ENDPOINT--接口的地址 REACT_APP_EOS_CONTRACT_NAME...action一般都是存储在Redux的一个普通的JavaScript对象,在本教程我们只需定义一个action,我们称之为SET_USER,对应到我们上一节内容的多索引表存储的数据,在frontend...这个函数将会针对store的每一个用户生成一个新的对象,开发者尽量不要直接修改Redux的store。...Store 有以下职责: 维持应用的 state; 提供 getState() 方法获取 state; 提供 dispatch(action) 方法更新 state; 通过 subscribe(listener...调用智能合约里面的action分为两种情况: 调用成功:SET_USER这个ation被执行且UserReducer会接收到相应的action,Redux store中将会更新用户名相应的属性,其他信息不变

    90430
    领券