重新封装Antd Input 组件，解决中文输入问题

重新封装Antd Input 组件，解决中文输入问题

import React, { useState, useEffect } from 'react'

import { Input } from 'antd'

function BaseHOC(key) {

  return function(props) {

    const { defaultValue, value, onChange } = props

    const hasValue = props.hasOwnProperty('value')

    // 用户切换到底是显示 value 还是 input

    // 不能直接用 isOnComposition 原因是，这个值发生变化不会触发重新渲染

    // 不能只使用 flag 原因是，setFlag 是异步的

    const [flag, setFlag] = useState(false)

    // 非中文输入时候显示 value。中文输入的时候显示 input

    const [input, setInput] = useState(hasValue ? value : defaultValue)

    useEffect(

      function() {

        if (hasValue && input !== value) {

          setInput(value)

        }

      },

      [value]

    )

    let isOnComposition = false

    function handleChange(e) {

      setInput(e.target.value)

      if (isOnComposition) return

      onChange && onChange(e)

    }

    function handleComposition(e) {

      if ('compositionend' === e.type) {

        isOnComposition = false

        handleChange(e)

      } else {

        isOnComposition = true

      }

      if (flag !== isOnComposition) {

        setFlag(isOnComposition)

      }

    }

    let Component = Input

    if (key) {

      Component = Input[key]

    }

    return (

      <Component

        {...props}

        value={hasValue && !flag ? value : input}

        onCompositionStart={handleComposition}

        onCompositionUpdate={handleComposition}

        onCompositionEnd={handleComposition}

        onChange={handleChange}

      />

    )

  }

}

const Component = function(props) {

  return BaseHOC()(props)

}

Component.Search = function(props) {

  return BaseHOC('Search')(props)

}

Component.TextArea = function(props) {

  return BaseHOC('TextArea')(props)

}

Component.Password = Input.Password

Component.Group = Input.Group

export default Component