账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    写了一个React的HOC出了点问题
    41
    0

    HOC功能:
    接受antd组件中的Input | TextArea等输入组件,将 lodash 中的 debounce 方法注入到 onchange 事件当中。
    代码如下:

    import React, {Component} from 'react';
    import {debounce} from 'lodash';
    
    export default (WrapperComponent) => {
        // WrapperComponent 就是传入的  `Input` | `TextArea` 组件
        return class extends Component {
            constructor() {
                super(...arguments);
                this.state = {
                    value: null
                }
            }
    
            // input onChange 方法
            changeHandler = (e) => {
    
                e.persist();
    
                this.delayChange(e.target.value.trim());
    
            }
    
            // 
            componentWillMount() {
    
                this.delayChange = debounce((v) => {
    
                    this.setState({value: v});
    
                }, 300);
    
            }
    
            render () {
    
                const {value} = this.state;
    
                if(!value) return null;
    
                return <WrapperComponent
                    defaultValue={value ? value : null}
                    onChange={this.changeHandler}
                    onBlur={this.saveInputValue}
                />;
            }
        };
    
    };

    在调用的时候报warning了,如下:
    Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

    还有一个问题是:怎么能把 WrapperComponent 组件上的数据,拿到当前的高阶组件内部?


    补充:
    高阶组件调用:

    import {Input} from 'antd';
    
    HOC(<Input />)
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 孤獨患者 普通会员 1楼

      当然可以,你可以详细描述一下你遇到的问题以及你的代码,我会尽我所能来帮助你。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部