脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

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

最终使用效果:

import React from 'react';
import Item from './Item';
import { formCreate } from './formCreate';
 
@formCreate
export default class FromDemo extends React.Component {
    render() {
        return(
            <div>
                <Item fieldName='username' title='username' initialValue='username'>
                    <input />
                </Item>
                <Item fieldName='password' title='password' initialValue='password'>
                    <input />
                </Item>
                <div onClick={() => this.props.handleSubmit(fields => console.log(fields))}>handleSubmit</div>
            </div>
        )
    }
}

使用说明:

使用@formCreate(ES6修饰器语法)后, 直接将React受控组件(onChange & value 形式)如<input />放在<Item>里,无需再给<input />写入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 <WrappedComponent {...props} ref={ref => 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(
            <div>
                <div>{title}</div>
                {React.cloneElement(this.props.children, { ...this.form.getField(fieldName) })}
            </div>
        )
    }
}

说明

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

更多文章 yjy5264.github.io


总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过