重新封装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 (
{...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