由于项目需要，需要给antd的Input组件封装一下，加一个limit属性，限制传入字数。

主要的要点在于render的时候要将自己封装的方法传出去，并将剩下的方法使用结构赋值…rest透传进来,其他的根据业务需要写就可以。

/**
 * WidgetInput 封装的 input
 */
import React, {Component, Fragment} from 'react'
import {Input} from 'antd'

export default class extends Component {
    state = {
        inputValue: ''
    };

    componentDidMount () {
        const { value } = this.props
        this.setState({
            inputValue: value
        })
    }



    handleInputChange = (e) => {
        let inputValue = e.target.value.trim()
        this.setState({ inputValue })
    }

    handleInputConfirm = () => {
        let { inputValue } = this.state
        let { limit, field } = this.props
        if (inputValue && inputValue.length > limit) {
            inputValue = inputValue.substr(0, limit)
        }
        this.setState({
            inputValue
        })
        this.props.onBlur(inputValue, field)
    }

    render() {
        const {onChange, onBlur,value,onPressEnter, limit, field,  ...rest} = this.props
        return (
            <Input
                value={this.state.inputValue}
                {...rest}
                onChange={this.handleInputChange}
                onBlur={this.handleInputConfirm}
                onPressEnter={this.handleInputConfirm}
            />
        )
    }
}

//外部组件使用
handleChangeInput = (value, type) => {
      let complete_field = this.props.toGetCompletedField(type)
      this.props.toChangeArticleInfoByField(complete_field, value)
  }
<WidgetInput
                    placeholder="设计师名"
                    value={designer.name}
                    limit={10}
                    field='body.designer.name'
                    onBlur={this.handleChangeInput}/>

赏

谢谢你请我吃糖果

微信