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

目录

1,目标

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

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

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

2,实现

整体目录:

txt 复制代码
src/components/Form
-- index.js
-- context.js // 存放上下文数据。
-- FormInput.js
-- FormButton.js

2.1,index.js

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

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 会认为是非受控组件而报错。

js 复制代码
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>
                <input
                    type={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

js 复制代码
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,使用

js 复制代码
import React, { Component } from "react";
import Form from "./components/Form/index";

export default class App extends Component {
    render() {
        return (
            <div>
                <Form
                    onSubmit={(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更新后的数据。


以上。

相关推荐
慧慧吖@1 分钟前
react基础
前端·javascript·react.js
浪裡遊11 分钟前
MUI组件库与主题系统全面指南
开发语言·前端·javascript·vue.js·react.js·前端框架·node.js
软件技术NINI1 小时前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI1 小时前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
Mintopia1 小时前
🛡️ 对抗性攻击与防御:WebAI模型的安全加固技术
前端·javascript·aigc
自律版Zz2 小时前
手写 Promise.resolve:从使用场景到实现的完整推导
前端·javascript
梵得儿SHI2 小时前
Vue 开发环境搭建全指南:从工具准备到项目启动
前端·javascript·vue.js·node.js·pnpm·vue开发环境·nvm版本管理
Glommer3 小时前
某音 Js 逆向思路
javascript·逆向
街尾杂货店&3 小时前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
月光技术杂谈3 小时前
用Deepseek 实现一个基于web的扣图应用
前端·javascript·html5·ccs·tensorflow.js·canvas api