React高階組件實(shí)現(xiàn)表單雙向綁定

yearsj 發(fā)布于2019-08-22 13:49 / 1886人閱讀

摘要：高階組件實(shí)現(xiàn)表單雙向綁定最終使用效果使用說(shuō)明使用修飾器語(yǔ)法后直接將受控組件形式如放在里無(wú)需再給寫入和。通過(guò)內(nèi)部保存一個(gè)上一次的來(lái)判斷是否變化。

React高階組件實(shí)現(xiàn)表單雙向綁定 最終使用效果:

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
            
        )
    }
}

使用說(shuō)明：

使用@formCreate（ES6修飾器語(yǔ)法）后, 直接將React受控組件（onChange & value 形式）如放在里,無(wú)需再給寫入onChange和value props。
通過(guò)this.props.handleSubmit()獲取form的值。

核心實(shí)現(xiàn) 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) })}
            
        )
    }
}

說(shuō)明

此處通過(guò)抽離state的方式將{onChange, value}以props.getField回調(diào)的形式傳遞給受控組件。
initialValue通過(guò)Item內(nèi)部保存一個(gè)上一次的initialValue來(lái)判斷是否變化。

更多文章 yjy5264.github.io