react组件-数量控制器

react 数量控制器

AMD标准

代码：

/**
 * @author: zhLee
 * @date: 2015/8/17
 * @remark: 数量控制器
 */
define(['react'],function (React) {
    var RC = React.createClass;

    // 按钮
    var Ctrl = RC({
        clickFn: function () {
            this.props.handleInput(this.props.type);
        },
        render: function () {
            var cls = this.props.cls,
                dt = this.props.data,
                isPlus = (this.props.type == 'plus'),// 判断是否为加号点击
                btn = isPlus ? dt.isMax : dt.isMin,  // 若是加，则判断btn是否达到最大值,若是减同理。
                callback = isPlus ? dt.maxFn : dt.minFn, //
                param = isPlus ? dt.max : dt.min,
                txt = isPlus ? ' ' : '-';
            if(btn) {// 若达到最大值或最小值，则为按钮加上disabled calss
                cls = cls   ' '   dt.disabledCls;
                callback(param, dt.val);
            }
            return (
                <a className={cls} href="javascript:;" onClick={this.clickFn}>{txt}</a>
            );
        }
    });

    // 值文本
    var NumTxt = RC({
        getInitialState: function () {
            return {
                val: this.props.data.val
            }
        },
        shouldComponentUpdate: function (nextProps, nextState) {
            /*console.log(this.state.val);
             console.log(nextProps.data.val);*/
            return true;
        },
        // 在组件接收到新的 props 的时候调用 在此函数内this.props是指上一个props
        componentWillReceiveProps: function (nextProps) {
            this.setState({
                val: nextProps.data.val
            });
        },
        _onBlur: function () {
            this.props.handleInput(this.refs.txt.getDOMNode().value);
        },
        _onChange:function (event) {
            this.setState({
                val: event.target.value
            });
        },
        render: function () {
            return (
                <input type="tel" data-flag={this.props.data.flag} ref="txt" className="amount-input" onBlur={this._onBlur}  value={this.state.val} onChange={this._onChange} name="count" />
            )
        }
    });

    // 主体
    return RC({
        getInitialState: function () {
            var dt = this.props.data;
            // 容错
            if(dt.max < dt.min) {
                dt.max = Infinity;
            }
            return {
                flag: dt.flag || '',                                  // 文本标识
                max: !isNaN(dt.max) ? parseInt(dt.max) : Infinity,    // 最大值
                min: !isNaN(dt.min) ? parseInt(dt.min) : 1,           // 最小值
                val: !isNaN(dt.val) ? parseInt(dt.val) : 1 ,          // 默认值/输出值
                isMin: true,               // 是否为最小值
                isMax: false,               // 是否为最大值
                onChangeFn: dt.onChangeFn || function () {},      // 文本值改变回调
                maxFn: dt.maxFn || function () {},      // 最大值回调
                minFn: dt.minFn ||function () {},      // 最小值回调
                disabledCls: dt.disabledCls || 'disabled'     // 按钮不可点类名
            }
        },
        // 测试值是否合法,返回结果
        checkValid: function () {
            var props = this.state,
                min = props.min,
                max = props.max,
                val = props.val,
                isMin =  false,
                isMax = false;

            if(val <= min) {
                val = min;
                isMin = true;
            }
            if(val >= max) {
                val = max;
                isMax = true;
            }
            return {
                isMin: isMin,
                isMax: isMax,
                val: val
            };
        },
        handleInput: function (val) {
            // 获取上一次值
            var lastVal = this.state.val;

            if(val == 'minus' && lastVal != this.state.min) {
                this.state.val -= 1;
            } else if (val == 'plus' && lastVal != this.state.max) {
                this.state.val  = 1;
            } else if(parseInt(val)){
                this.state.val = parseInt(val) || this.state.min;
            }
            var result = this.checkValid();
            /*console.log(result.val)
             console.log(lastVal)*/
            if(lastVal !== result.val) {
                this.state.onChangeFn(result.val, this.refs.input.getDOMNode());
            }

            this.setState(result)
        },
        render: function () {
            var result = this.checkValid();
            this.state.val = result.val;
            this.state.max = this.props.max || this.state.max;
            // 判断最大/小值
            this.state.isMax = result.isMax;
            this.state.isMin = result.isMin;

            return (
                <div>
                    <Ctrl type="minus" cls='subtract' data={this.state} handleInput={this.handleInput} />
                    <div className="amount">
                        <NumTxt ref="input" data={this.state} handleInput={this.handleInput}/>
                    </div>
                    <Ctrl type="plus" cls='add' data={this.state} handleInput={this.handleInput} />
                </div>
            );
        }
    });
});