一、问题描述

TextInput 设置了 maxLength 后，输入文字剩最后一个字符时，输入 emoji 表情包，会导致已输入内容被意外清空。

二、相关 issue

https://github.com/facebook/react-native/issues/10929
https://github.com/facebook/react-native/issues/10964
https://github.com/facebook/react-native/issues/32732

三、解决方案

3.1 升级 react-native 版本

React-native v0.66 已经解决了这个问题，参考 请搜索"content is reset"，但是可能部分项目升级代价过高，如果不方便升级可以看下面的处理方案

3.2 hack 方案

1、在 onKeyPress 中获取真实输入；
2、判断输入字符的长度是否超出允许输入的长度；
3、如果超出长度，那么修改 change 事件的 text 为当前组件内的缓存值。

/**
 * FIXME: 如果重置了输入值，这里会有 bug
 */
import React, { useRef, useState } from 'react'
import { TextInput, TextInputProps } from '@mrn/react-native'
import { useMemoizedFn } from 'ahooks'

export interface MaxLenInputProps extends Omit<TextInputProps, 'maxLength'> {
    /*
     * 允许输入内容的最大长度，必填
     */
    maxLength: number
}
export const MaxLenInput = (props: MaxLenInputProps) => {
    const {
        value, onKeyPress, onChangeText, maxLength
    } = props

    const notChangeRef = useRef(false)

    const originalOnKeyPress = useMemoizedFn((...args: Parameters<typeof onKeyPress>) => {
        const [event] = args
        const { nativeEvent: { key } } = event
        const valueLen = value?.length || 0
        const keyLen = key.length

        if (keyLen > 1 && !['Backspace', 'Enter'].includes(key)) {
            // 是 emoji
            if (maxLength - valueLen < keyLen) {
                notChangeRef.current = true
            }
        }

        onKeyPress?.(...args)
    })

    const originalOnChangeText = useMemoizedFn((...args: Parameters<typeof onChangeText>) => {
        const [text] = args
        const emitValue = notChangeRef.current ? value : text

        onChangeText?.apply?.(null, [emitValue, ...args.slice(1)])
        notChangeRef.current = false
    })

    return (
        <TextInput
            {...props}
            value={value}
            maxLength={maxLength}
            onKeyPress={originalOnKeyPress}
            onChangeText={originalOnChangeText} />
    )
}