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

使用React.js和redux从<Field> onSubmit获取值。

React.js是一个用于构建用户界面的JavaScript库,而Redux是一个用于管理应用程序状态的JavaScript库。在React.js和Redux中,可以使用<Field>组件来获取表单字段的值。

<Field>组件是由第三方库提供的,它可以用于处理表单字段的输入和验证。通过在<Field>组件上设置onSubmit属性,可以在表单提交时获取字段的值。

要从<Field>组件的onSubmit属性获取值,可以在提交表单时调用一个处理函数,并将字段的值作为参数传递给该函数。处理函数可以在Redux的action中进行定义,以便更新应用程序的状态。

以下是一个示例代码,展示了如何使用React.js和Redux从<Field>组件的onSubmit属性获取值:

代码语言:javascript
复制
import React from 'react';
import { connect } from 'react-redux';
import { updateFieldValue } from './actions';

class MyForm extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();
    const fieldValue = event.target.elements.field.value;
    this.props.updateFieldValue(fieldValue);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Field:
          <input type="text" name="field" />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

const mapDispatchToProps = {
  updateFieldValue,
};

export default connect(null, mapDispatchToProps)(MyForm);

在上面的代码中,我们定义了一个名为MyForm的React组件。在handleSubmit函数中,我们通过event.target.elements.field.value获取了字段的值,并将其传递给updateFieldValue函数来更新Redux中的状态。

需要注意的是,上述代码中的updateFieldValue函数是一个Redux action,它应该在Redux的action文件中进行定义。在该action中,可以使用Redux的dispatch函数来更新应用程序的状态。

这是一个简单的示例,展示了如何使用React.js和Redux从<Field>组件的onSubmit属性获取值。根据具体的应用场景和需求,可能需要进行更多的处理和验证。

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

相关·内容

redux-form的学习笔记

在github上获得了5580颗star654颗的fork数,今天就写一下我的redux-form的学习笔记吧 左转redux-form的api文档地址:http://redux-form.com/6.5.0.../docs/api/ 1第一件要做的事当然是安装依赖啦,通过终端进入项目所在目录,写入npm install redux-form安装依赖(前提:已成功配置node的运行环境,并且已安装好reactredux..., reduxForm//或者其他的组件 } from 'redux-form';         引入必要的redux-form表单组件,比如Field,Fields,FormSection等 然后在文件最下方写入...我的form.js如下: import React from 'react' import { Field, reduxForm } from 'redux-form' const SimpleForm...= (props) => { const { handleSubmit, pristine, reset, submitting } = props return ( <form onSubmit

1K90

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

Redux.js Redux 并非 React 人专用,它借用函数式编程思想,旨在提供可预测的状态管理; 具体的,在 Redux 中的 state 没有 setter 方法,取而代之的是:state 经过一个接一个的...' const MyForm = () => ( <Form onSubmit={onSubmit} validate={validate} render={({ handleSubmit...以及多点触控pinchrotate识别器; 14....,如数字、大数、复数、分数、单位矩阵; 功能强大且易于使用~ 19. howler.js howler.js 让音频处理变得容易、好用; 20....本瓜以为:反而,这些体量小的库,能针对解决某一项问题,核心原理奇妙,官网也做得特别精美,叫人爱之尤甚; 还是那句老话:工具选的好,下班下的早;开发工作分两类:写轮子的为一类,用轮子的为一类;写轮子也是用轮子做起的

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

    3中的区别) 5在尚未输入内容时(pristine=true)或在提交过程中(submitting=true),禁止使用提交按钮。...,使redux-form同步错误提示 })(SyncValidationForm)//写入的redux-form组件 1什么是Field组件?...Field组件是redux-form组件库中的核心组件,它位于你的输入框(input)或输入框组件的外一层,将其包装起来从而使输入框能redux的store直接连接起来。...} label="Username"/> 在上面的Field中namecomponent是必填的,而type属性label属性是选填的,但选填的属性(如typelabel)可通过props属性传入它的...component中,比如以上的renderField中 2Field组件的name属性component属性 name属性是Filed组件的名称,也即Field下输入框的名称,它将成为存储form表单数据的

    1.8K50

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

    技术角度来看,React Query 很可能: 帮助你应用程序中删除许多复杂误解的代码,并用几行 React Query 逻辑替代。...虽然可以使用Redux 这样的状态管理库来缓存数据,但这些用例足够不同,值得使用专为数据获取用例而构建的工具。...UI 层一起使用 API 端点是预先定义的,包括如何参数生成查询参数将响应转换为缓存的方式 RTK Query 还可以生成封装整个数据获取过程的 React hooks,为组件提供数据 isLoading...字段,并在组件挂载卸载时管理缓存数据的生命周期 RTK Query 提供了“缓存条目生命周期”选项,可以通过 WebSocket 消息流式传输缓存更新,以在获取初始数据后使用 我们有 OpenAPI...为什么不使用 Redux-Form? 到现在为止,您可能会想,“为什么你不只是使用 Redux-Form?”问得好。

    72730

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

    - 元数据中动态创建Redux-Forms uniforms - 一堆React组件帮助器,可以轻松生成验证表单 formik - React中的表单,没有眼泪 NeoForm - 用于表单状态管理验证的模块化...ReactFlux构建应用程序 Flux:构建客户端应用程序的简单架构模型 使用来自Yahoo的DispatchrFetchr的Isomorphic Flux示例 使用React.jsFlux进行异步请求...- 一个简单的redux中间件,用于使用JSON Schema验证redux状态值对象类型 redux-persist - 坚持并补充redux商店 Redux教程 在ES6中使用ReactRedux...入门:测试驱动的教程:第2部分 全栈Redux教程 使用ReduxReact-Router进行服务器端渲染 Redux深度介绍 单元测试Redux应用程序 使用JWT身份验证保护您的ReactRedux...- React组件包装器,用于将React与MobX结合使用 MobX教程 10分钟介绍MobXReact 使用MobX管理React应用程序中的复杂状态 将您的应用程序Redux重构为MobX

    12.4K30

    React useReducer 终极使用教程

    本文完整版:《React useReducer 终极使用教程》 useReducer 是在 react V 16.8 推出的钩子函数,用法层面来说是可以代替useState。...这其实有点像redux,不过还是有一些不同,后面笔者会列举这两个概念不同。...最开始我们的想法是我们尽量避免使用第三方的state管理工具,当你有疑惑是否要使用他们时,说明这不是用他们的时候。 下面笔者列举几个使用ReduxMobx的例子。...当你需要一个更可预测的状态 当你的应用运行在不同的环境中时,使用Redux可以使得state的管理变得更稳定。同样的stateaction传到reducer的时候,会返回相同的结果。...React useReducer 教程总结 到这里 useReducer 的使用场景用法例子讲解都已经介绍完成了,最后我们回顾一下,首先类比于redux的reducer,useReducer 的思路

    3.7K10

    浅谈表单受控性及结合Hooks应用

    在本文中将介绍在 React 中受控非受控表单是如何使用的,以及现代化使用 hooks 来管理 form 状态。...到 ant4 的差异为例 antd3 中form 组件设计思想: 使用HOC(高阶组件)包裹 form 表单,HOC 组件中的 state 存储所有的控件 value 值,定义设置值取值的方法 存在缺陷...实例,并通过 useRef 缓存所有的表单 value 值,定义设置值取值得方法。...利用 useRef 的特性,在调用 useForm 的组件中,创建到销毁等各种生命周期,无论组件渲染多少次,FormStore 只会实例化一次,在每个 Field 中定义 forceUpdate()...不同于 rc-field-form 中使用的受控表单来做表单状态管理,react-hook-form 使用了 React 的 useRef useReducer 来处理表单数据的状态,而不是使用

    31710

    Redux 包教包会(一):解救 React 状态危机

    这里我们将使用 React 作为绑定视图层,因为 Redux 最初诞生于 React 社区,为解决 React 的状态管理问题而设计开发的一个库。...前提条件 本篇教程是关于 Redux 的快速入门教程,并致力于讲解与 React 绑定时的使用,而了解掌握 Redux 对于一个 React 开发者来说属于较为进阶的内容,所以我们假设在阅读本篇教程之前...代码最终效果 本教程所实现的源代码都托管在 Github 上: •纯 React 源码:源码地址[6]。•使用 Redux 重构后的源码:源码地址[7]。...准备 Redux 环境 我们知道 Redux 可以与多种视图层开发框架如 React,Vue Angular 等搭配使用,而 Redux 只是一个状态管理容器,所以为了在 React 中使用 Redux...Provider 是 react-redux 提供的 API,是 Redux 在 React 使用的绑定库,它搭建起 Redux React 交流的桥梁。

    1.8K20

    推荐十一个React Hook库

    以高质量编写维护。它使您的编码更简单易懂,更精确地讲是数据处理部分。hook本身使用TypeScript,甚至支持SSRGraphQL。...如果您想在多个位置使用相同的状态,或者为多个组件提供相同的状态,这很有用。该名称来自合并上下文状态的文字游戏。使用Typescript写的,体积很小。虽然该文档不是很详细,但是可以完成工作。...地址: https://github.com/reduxjs/redux 使用案例: import {useSelector, useDispatch} from "react-redux"; import...actions.incrementCounter)}> Counter +1 ); }; 5.React hook form React hook form是一个与FormikRedux...它用于路由获取应用程序URL历史记录等。它与Redux一起实现了用于获取此类有用数据的hook。

    4.1K30

    React 手写笔记

    用户的使用方式非常简单 用户之间没有协作 不需要与服务器大量交互,也没有使用 WebSocket 视图层(View)只单一来源获取数据 需要使用Redux的项目: 用户的使用方式复杂 不同身份的用户有不同的使用方式...(比如普通用户管理员) 多个用户之间可以协作 与服务器大量交互,或者使用了WebSocket View要从多个来源获取数据 组件层面考虑,什么样子的需要Redux: 某个组件的状态,需要共享 某个状态需要在任何地方都可以拿到...注意:flux、redux都不是必须react搭配使用的,因为fluxredux是完整的架构,在学习react的时候,只是将react的组件作为redux中的视图层去使用了。...容器组件 作用 描述如何展现(骨架、样式) 描述如何运行(数据获取、状态更新) 直接使用 Redux 否 是 数据来源 props 监听 Redux state 数据修改 props 调用回调函数...中使用immutable.js redux官网进行reduximmutable的集成。

    4.8K20

    前端进阶知识汇总

    这个计划包括页面布局,JavaScript,计算机网络,Vue.js,React.js,Node.js,设计模式,架构,工程化,数据结构算法,实战项目。...手写一个Redux,深入理解其原理 手写一个React-Redux,玩转React的Context API Redux异步解决方案之Redux-Thunk原理及源码解析 (推荐!!)...使用React-Router实现前端路由鉴权 手写React-Router源码,深入理解其原理 Node.js (推荐!!)...发布订阅模式入手读懂Node.js的EventEmitter源码 架构源码 (推荐!!)...架构入手轻松读懂框架源码:以jQuery,Zepto,Vuelodash-es为例 深入解析Underscore.js源码架构 数据结构算法 前端也能学算法:JS版常见排序算法-冒泡,插入,快排,

    1.2K23

    学习 React Native for Android:React 基础

    代码解读 程序的第 4 行第 5 行引用了 build 目录下的 react.js react-dom.js 文件。...组件的状态通常在组件的内部函数 getInitialState() 中声明,使用 setState() 函数更新值,并通过 this.state.状态名 来获取值。 我们将在下一个练习了解状态的使用。...功能上看,这两个部分可以各自作为一个独立的组件 NameList NameForm ,然后再组合成一个复合组件 GreetingWidget 。...在 NameForm 的实现中,我们将表单的 onSubmit 事件指定使用该组件实例的 handleSubmit() 函数处理: 12345678 render: function() { return...补遗 本文例子入手,一步步介绍了 JSX 、组件、属性、状态、数据展示、表单处理、复合组件等 React 开发中的基础概念,在其中存在的一些坑值得深究的东西也尽量以扩展练习的形式交给读者主动去学习掌握

    9.2K20

    antd4与antd3Form表单设计区别

    核心 antd3思想:使用HOC(高阶组件)包裹form表单,HOC组件中的state存储所有的value值,定义设置值取值的方法 缺点:动一发牵全身,一个value值改变,因为这是顶级状态,所以所有的子组件都会因父组件的重新...render而render,浪费了性能 antd4思想:使用Context 包裹form表单,自定义一个store类,存储所有的表单value值,定义设置值取值得方法,因为不是组件内部状态,需要自己定义更新函数...React.useImperativeHandle(ref, () => ({ ...formInstanc, message: '我啊啊啊奥奥' })) return ( { // 强制更新 this.forceUpdate() } // 完成双向数据绑定,与FormStore通信,直接store...const { getFieldDecorator } = this.props.form; return ( <Form onSubmit

    2K20
    领券