React高阶组件实现表单双向绑定

yearsj 发布于2019-08-22 13:49 / 1867人阅读

摘要：高阶组件实现表单双向绑定最终使用效果使用说明使用修饰器语法后直接将受控组件形式如放在里无需再给写入和。通过内部保存一个上一次的来判断是否变化。

React高阶组件实现表单双向绑定 最终使用效果:

import React from "react";
import Item from "./Item";
import { formCreate } from "./formCreate";
 
@formCreate
export default class FromDemo extends React.Component {
    render() {
        return(
            
                
                    
                
                
                    
                
                 this.props.handleSubmit(fields => console.log(fields))}>handleSubmit
            
        )
    }
}

使用说明：

使用@formCreate（ES6修饰器语法）后, 直接将React受控组件（onChange & value 形式）如放在里,无需再给写入onChange和value props。
通过this.props.handleSubmit()获取form的值。

核心实现 formCreate.js

import React from "react";

export const formCreate = WrappedComponent => class extends React.Component {
    state = { fields: {} };
    
    onChange = fieldName => value => this.setFieldValue(fieldName, value);
    
    handleSubmit = callback => callback(this.state.fields);
    
    getFieldValue = () => this.state.fields;
    
    setFieldValue = (fieldName, value) => this.setState(state => {
        state.fields[fieldName] = value;
        return state;
    });
    
    getField = fieldName => ({onChange: this.onChange(fieldName), value: this.state.fields[fieldName]});
    
    setInitialValue = (fieldName, value) => this.setFieldValue(fieldName, value);
    
    render() {
        const props = {
            ...this.props,
            handleSubmit: this.handleSubmit,
            getField: this.getField,
            getFieldValue: this.getFieldValue,
            setFieldValue: this.setFieldValue,
            setInitialValue: this.setInitialValue,
        };
        return  this.instanceComponent = ref} />;
    }
};

Item.js

import React from "react";
 
export default class Item extends React.Component {
    form = this.props.children._owner.stateNode.props;
    
    componentDidMount() {
        this.updateInitialValue();
    }
    
    componentDidUpdate() {
        this.updateInitialValue();
    }
    
    updateInitialValue() {
        let { fieldName, initialValue } = this.props;
        (this.initialValue !== initialValue) &&
        (this.initialValue = initialValue) &&
        this.form.setInitialValue(fieldName, initialValue);
    }
    
    render() {
        let { title, fieldName } = this.props;
        return(
            
                {title}
                {React.cloneElement(this.props.children, { ...this.form.getField(fieldName) })}
            
        )
    }
}

说明

此处通过抽离state的方式将{onChange, value}以props.getField回调的形式传递给受控组件。
initialValue通过Item内部保存一个上一次的initialValue来判断是否变化。

更多文章 yjy5264.github.io

GPU云服务器云服务器高阶组件双向绑定双向数据绑定表单组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92481.html

Ant-Design-组件-——-Form表单（一）

摘要：擅长网站建设微信公众号开发微信小程序开发小游戏制作企业微信制作建设，专注于前端框架服务端渲染技术交互设计图像绘制数据分析等研究。 Ant Design of React @3.10.9 拉取项目 luwei.web.study-ant-design-pro, 切换至 query 分支，可看到 Form 表单实现效果实现一个查询表单 showImg(https://segmentfau...

trilever 2019-08-23 14:28 评论0 收藏0
React发展几年前的现状个人理解(React新手向导)

摘要：带来的重要的改变我认为有三点解决了回调地狱箭头函数语法糖更好地解决了指向问题，并简化表达式写法使进入面向对象编程方案一既然有了，那么一个视图出来不就可以了采用原来的结构，控制视图，并且负责与层通信每一个页面都是一个，页面之间都通讯用事件订阅 ES6 ES6带来的重要的改变我认为有三点： promise/generator/async解决了回调地狱(callback hell) => ...

objc94 2019-08-22 13:51 评论0 收藏0
React学习之漫谈React

摘要：事件系统合成事件的绑定方式合成事件的实现机制事件委派和自动绑定。高阶组件如果已经理解高阶函数，那么理解高阶组件也很容易的。例如我们常见的方法等都是高阶函数。对测试群众来说，从质量保证的角度出发，单元测试覆盖率是事件系统合成事件的绑定方式 `Test` 合成事件的实现机制：事件委派和自动绑定。 React合成事件系统的委托机制，在合成事件内部仅仅是对最外层的容器进行了绑定，并且依赖...

darkbug 2019-08-23 18:38 评论0 收藏0
前端MVVM模式及其在Vue和React中的体现

摘要：在模式中一般把层算在层中，只有在理想的双向绑定模式下，才会完全的消失。层将通过特定的展示出来，并在控件上绑定视图交互事件，一般由框架自动生成在浏览器中。三大框架的异同三大框架都是数据驱动型的框架及是双向数据绑定是单向数据绑定。 MVVM相关概念 1） MVVM典型特点是有四个概念：Model、View、ViewModel、绑定器。MVVM可以是单向绑定也可以是双向绑定甚至是不绑...

沈建明 2019-08-23 12:36 评论0 收藏0
深入redux技术栈

摘要：另外，内置的函数在经过一系列校验后，触发，之后被更改，之后依次调用监听，完成整个状态树的更新。总而言之，遵守这套规范并不是强制性的，但是项目一旦稍微复杂一些，这样做的好处就可以充分彰显出来。这一篇是接上一篇react进阶漫谈的第二篇，这一篇主要分析redux的思想和应用，同样参考了网络上的大量资料，但代码同样都是自己尝试实践所得，在这里分享出来，仅供一起学习(上一篇地址:个人博客／s...

imingyu 2019-08-20 14:22 评论0 收藏0