- 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积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
