@ttk/component/src/repeter/index.js

ttk组件库

import React, { PureComponent } from 'react'
import Input from '../input'

const InputNumber = Input.InputNumber;
class RepeterComponent extends PureComponent {
    constructor(props){
        super(props)
        this.state = {
            isAdd: true,
            repeterChildren: []
        }
    }

    componentDidMount() {
        let children = this.props.children
        this.setState({repeterChildren: [children]})
    }

    addBtn = () => {
        this.setState({flag:true})
        if(this.state.repeterChildren.length<=100) {
            let arr = this.state.repeterChildren
            arr.push(this.props.children)
            this.setState({repeterChildren: arr})
        }else {
            alert('一百条了！')
        }
        this.props.addCallBack && this.props.addCallBack()
    }

    renderInputLife = () => {
        return (
            <div className='ttk-expense-input'>
                <span>{this.props.inputLifeName}:</span><InputNumber style={{ width: '200px' }}/>
            </div>
        )
    }

    renderRows = (name) => {
        return (
            <div className='ttk-scm-app-expense-card-form-div'>
                {this.props.inputLife ? this.renderInputLife() : ''}
            </div>
        )
    }

    getRepeterChildren = (repeterChildren) => {
        return repeterChildren.map(item => {
            return item
        })
    }

    render(){
        let  { btnVisible } = this.props
        return (
            <div>
                {this.props.children}
                {btnVisible ? this.renderRows(this.props.buttonName) : null}  
            </div>
        )
    }
}

export default RepeterComponent