Antd源码浅析（三）InputNumber组件二

河马嘴不大

发布于 2022-12-24 12:17:49

1.2K0

发布于 2022-12-24 12:17:49

前言

上篇我们讲了InputNumber组件的主要结构组成，本篇我们来分析，InputNumber组件的核心实现rc-input-number的源码，即<RcInputNumber/>组件。虽然我们是浅析Antd组件，但本着专注、严谨的科学态度，这里河马君会为大家从Antd库入手，讲解背后的依赖库，深入到最底层，主要一个是为了理解代码，另一个是看看大家都用哪些开源库，加快开发进度。

目录结构

我们来看看rc-input-number的目录结构：

核心代码位于src 下：

结构很清晰，我们也可以从效果图分析：

其中的InputHandler组件，就是InputNumber右边的两个按钮组件，这里要说明一下，不同于Antd的源码，rc-input-number的源码使用普通的ES6编写，小伙伴们阅读起来应该会比较流畅，那我们首先分析一下InputHandler组件

InputHandler组件

代码不多，直接贴出：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Touchable from 'rmc-feedback';

class InputHandler extends Component {
  render() {
    const {
      prefixCls, disabled, ...otherProps,
    } = this.props;
    return (
      <Touchable
        disabled={disabled}
        activeClassName={`${prefixCls}-handler-active`}
      >
        <span {...otherProps} />
      </Touchable>
    );
  }
}

InputHandler.propTypes = {
  prefixCls: PropTypes.string,
  disabled: PropTypes.bool,
  onTouchStart: PropTypes.func,
  onTouchEnd: PropTypes.func,
  onMouseDown: PropTypes.func,
  onMouseUp: PropTypes.func,
  onMouseLeave: PropTypes.func,
};

export default InputHandler;

这里对于rmc-feedback大家可能比较陌生，rmc-feedback是一个处理active状态的库，也适用于移动端，只需要传入active状态时的className或者style，这里用在InputHandler组件中，就是处理在用户点击数字加减时的状态

现在我们来看看rc-input-number中InputHandler的主体：