React@16.x(14)context 举例 - Form 表单

目录

  • 1,目标
  • 2,实现
    • 2.1,index.js
    • 2.2,context.js
    • 2.2,Form.Input
    • 2.3,Form.Button
  • 3,使用

1,目标

上篇文章说到,context 上下文一般用于第3方组件库,因为使用场景是需要多个组件之间相互配合实现一整套的逻辑。(高内聚的思想)

所以利用上下文的特性简单封装一个表单,看看如何实现和使用。

在 element-ui 中 Form 表单组件之间的联动,也是一个思想。它使用的 发布订阅模式 来逐层传递数据。

2,实现

整体目录:

src/components/Form
-- index.js
-- context.js // 存放上下文数据。
-- FormInput.js
-- FormButton.js

2.1,index.js

import React, { Component } from "react";
import PropTypes from "prop-types"; // 用于验证 props 类型
import { Provider } from "./context";
import FormInput from "./FormInput";
import FormButton from "./FormButton";export default class Form extends Component {state = {formData: {},changeFormData: (name, value) => {this.setState({formData: {...this.state.formData,[name]: value,},});},submit: () => {this.props.onSubmit?.(this.state.formData);},};static propTypes = {onSubmit: PropTypes.func,};render() {return <Provider value={this.state}>{this.props.children}</Provider>;}
}// 赋值到 Form 组件上方便引用。
Form.Input = FormInput;
Form.Button = FormButton;

2.2,context.js

import React from "react";const ctx = React.createContext();
export const { Provider, Consumer } = ctx;
export default ctx;

2.2,Form.Input

注意 input.value 属性,因为 this.context.formData[this.props.name] 一开始是 undefined,所以得加一个默认值 '',否则 React 会认为是非受控组件而报错。

import React, { Component } from "react";
import PropTypes from "prop-types";
import ctx from "./context";export default class FormInput extends Component {static contextType = ctx;static defaultProps = {type: "text",};static propTypes = {type: PropTypes.string.isRequired,name: PropTypes.string.isRequired,};render() {return (<div><inputtype={this.props.type}name={this.props.name}value={this.context.formData[this.props.name] || ""}onChange={(e) => {this.context.changeFormData(this.props.name, e.target.value);}}></input></div>);}
}

2.3,Form.Button

import React from "react";
import { Consumer } from "./context.js";export default function FormButton(props) {return (<Consumer>{(ctx) => {return <button onClick={() => ctx.submit()}>{props.children}</button>;}}</Consumer>);
}

3,使用

import React, { Component } from "react";
import Form from "./components/Form/index";export default class App extends Component {render() {return (<div><FormonSubmit={(formData) => {console.log(formData);}}><div><label>用户名</label><Form.Input name="id"></Form.Input></div><div><label>用户名</label><Form.Input name="pwd" type="password"></Form.Input></div><Form.Button>获取FormData</Form.Button></Form></div>);}
}

最终,点击按钮就能获取到 formData更新后的数据。


以上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/20105.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Chisel入门——在windows下vscode搭建|部署Scala2.13.3开发环境|用Chisel点亮FPGA小灯等实验

文章目录 前言一、vscode搭建scala开发环境1.1 安装Scala官方插件1.2 创建hello_world.scala文件1.3 确认java的版本(博主使用的是1.8)1.4 下载Scala Windows版本的二进制文件1.5 配置环境变量1.6 交互模式测试一下1.7 vscode运行scala 二、windows安装sbt2.1 下载sbt2.2 设置环…

函数递归及具体例子(持续更新)

递归就是函数自己调用自己 求n的阶乘 n! n * (n - 1)! 直到n为1或者0的时候为止 举个例子 int Fun(int n) {if (n < 0){return 1;}else{return n * Fun(n - 1);} }int main() {int n 0;scanf("%d", &n);int ret Fun(n);printf("%d\n", ret…

安装Kubernetes v3 ----以docker的方式部署

以docker的方式部署 docker run -d \ --restartunless-stopped \ --namekuboard \ -p 80:80/tcp \ -p 10081:10081/tcp \ -e KUBOARD_ENDPOINT"http://192.168.136.55:80" \ -e KUBOARD_AGENT_SERVER_TCP_PORT"10081" \ -v /root/kuboard-data:/data \ e…

springboot中抽象类无法注入到ioc容器

1、背景 在写代码时&#xff0c;发现service接口有两个实现类&#xff0c;并且两个实现类中没有对类名重命名&#xff0c;属性注入的时候也没有使用byName或Qualifier&#xff0c;正确情况下会发生多实现报错的问题&#xff0c;以前对这个问题进行解析过。 2、调试过程 我想…

【设计模式】创建型-建造者模式

前言 在面向对象的软件开发中&#xff0c;构建复杂对象时经常会遇到许多挑战。一种常见的解决方案是使用设计模式&#xff0c;其中建造者模式是一个强大而灵活的选择。本文将深入探讨建造者模式的原理、结构、优点以及如何在实际项目中应用它。 一、复杂的对象 public class…

飞凌嵌入式FET3568/3568J-C核心板现已适配OpenHarmony4.1

近日&#xff0c;飞凌嵌入式为FET3568/3568J-C核心板适配了OpenHarmony4.1系统&#xff0c;新系统的加持使核心板在兼容性、稳定性与安全性等方面都得到进一步提升&#xff0c;不仅为FET3568/3568J-C核心板赋予了更强大的功能&#xff0c;也为开发者们提供了更加广阔的创新空间…

每日一练编程题:今天是【接口,多态】

设计程序 : 电脑类的属性USB接口数组 : 有3个usb插口电脑类的功能 : 通过接口插入外设 (u盘,麦克风,键盘等) addUSB(USB usb) { }开机 要求: 电脑开机前,先启动外设关机 要求: 电脑关机前,先关闭外设 外设类(u盘,麦克风,键盘等) 功能 : 启动 关闭 USB接口 定义usb设备的统一…

python多种方式 保留小数点位数(附Demo)

目录 前言1. 字符串格式2. round函数3. Decimal模块4. numpy库5. Demo 前言 在Python中&#xff0c;保留小数点后特定位数可以通过多种方式实现 以下是几种常见的方法&#xff0c;并附上相应的代码示例&#xff1a; 使用字符串格式化&#xff08;String Formatting&#xff…

IDE集成开发环境

IDE集成开发环境&#xff0c;全称“Integrated Development Environment” 介绍 定义&#xff1a; IDE是用于提供程序开发环境的应用程序&#xff0c;它集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。 组成部分&#xff1a; IDE通常包括代码编…

Ubuntu20.04 Mysql基本操作知识

#Mysql基本知识 运行环境Ubuntu20.04 1.开启mysql服务 sytemctl start mysql不然&#xff0c;命令行进入myql交互行提交命令后&#xff0c;就会出现4200错误。 2.显示所有数据库 SHOW DATABASES;注意复数s&#xff0c;毕竟很多数据库 3.新建数据库test CREATE DATABASE …

【学习笔记】计算机组成原理(九+十)

控制单元的功能 文章目录 控制单元的功能9.1 微操作命令的分析9.1.1 取指周期9.1.2 间址周期9.1.3 执行周期9.1.4 中断周期 9.2 控制单元的功能9.2.1 控制单元的外特性9.2.2 控制信号举例9.2.3 多级时序系统9.2.4 控制方式 控制单元的设计10.1 组合逻辑设计10.1.1 组合逻辑控制…

LabVIEW与Simulink的通信及调用方式

LabVIEW和Simulink可以通过多种方式进行通信和集成&#xff0c;实现数据交互和功能调用。常见的通信方式包括TCP/IP、UDP、共享内存等&#xff0c;此外还可以利用MATLAB Script Node和S-Function等直接调用对方的功能。这些方法使得LabVIEW和Simulink能够协同工作&#xff0c;充…

[Algorithm][动态规划][子序列问题][最长递增子序列的个数][最长数对链]详细讲解

目录 1.最长递增子序列的个数1.题目链接2.算法原理详解3.代码实现 2.最长数对链1.题目链接2.算法原理详解3.代码实现 1.最长递增子序列的个数 1.题目链接 最长递增子序列的个数 2.算法原理详解 注意&#xff1a;本题思路和思维方式及用到的方法很值得考究&#xff0c;个人感…

dubbo复习:(18)服务端Filter

用来在服务响应返回到客户端之前进行额外处理。 一、定义Filter package cn.edu.tju.config;import org.apache.dubbo.rpc.Filter; import org.apache.dubbo.rpc.Result; import org.apache.dubbo.rpc.Invoker; import org.apache.dubbo.rpc.Invocation; import org.apache.du…

大量path计算优化方案

1.影响path基础属性数据做key缓存&#xff0c;缓存的path应去除坐标变换&#xff0c;归一化。基础属性应满足CAB, BC-A 2.高频path操作以&#xff08;keykey操作&#xff09;做新key缓存。 3.高频修改高级属性&#xff0c;以新key属性变更做新key缓存。 4.key与id做中转映射&am…

redis修改密码

基于镜像部署 其实在dockerhub上都有写 redsi 配置文件从哪找呢? 答案是&#xff1a;从官网或者从github上的release里找到你需要的对应版本解压后有配置文件 配置文件路径在哪呢 用redis-server /etc/redis/redis.conf 去指定启动使用的配置文件 好那么接下来就是一些简单的…

ad18学习笔记20:焊盘设置Solder Mask Expansion(阻焊层延伸)

【AD18新手入门】从零开始制造自己的PCB_ad18教程-CSDN博客 Altium Designer绘制焊盘孔&#xff08;Pad孔&#xff09;封装库的技巧&#xff0c;包括原理图封装和PCB封装_哔哩哔哩_bilibili 默认的焊盘中间是有个过孔的&#xff0c;单层焊盘&#xff08;表贴烛盘&#xff09;…

工作流 Activiti7 初始

文章目录 ☃️1.1 Activiti 介绍☃️1.2 Activiti 开发流程☃️1.3 BPMN 2.0 规范是什么☃️1.4 BPMN 2.0 基本流程符号❄️❄️1.4.1 事件 Event❄️❄️1.4.2 活动❄️❄️1.4.3 网关 Gateway ☃️1.5 Activiti API 服务接口❄️❄️1.5.1 核心Service接口及其获取 ☃️1.1 A…

AI科普:TensorFlow 的基本概念和使用场景

TensorFlow是一个开源的深度学习框架&#xff0c;由Google开发并于2015年发布。它提供了一个使用数据流图进行数值计算的接口&#xff0c;可以在不同的硬件平台上运行&#xff0c;包括CPU、GPU和TPU。 TensorFlow的核心概念是张量&#xff08;Tensor&#xff09;和计算图&…

fps游戏如何快速定位矩阵

fps游戏如何快速定位矩阵 矩阵特点: 1、第一行第一列值的范围在**-1 ---- 1**之间&#xff0c;如果开镜之后值会变大。 2、第一行第三列的值始终为 0。 3、第一行第四列 的值比较大 &#xff0c; >300或者**<-300**。 根据这三个特点&#xff0c;定位矩阵已经足够了…