相关平台

钉钉小程序

使用框架: React

复现步骤

import './index.scss'

import { Input, View } from '@tarojs/components'
import { useState } from 'react'

function ImConv() {
    const [content, setContent] = useState('')

    return (
        <View className='im-conv' id='im-conv'>
            <Input
                className='chat-box-content-input'
                style={{ width: '100%' }}
                confirmType='send'
                value={content}
                onInput={(e) => setContent(e.detail.value)}
            />
        </View>
    )
}

export default ImConv

685_1691411694.mp4

期望结果

Input 输入框正常，应该能输入中文

实际结果

实际上不能，但可以通过 enableNative={false} 可以实现中文输入

import './index.scss'

import { Input, View } from '@tarojs/components'
import { useState } from 'react'

function ImConv() {
    const [content, setContent] = useState('')

    return (
        <View className='im-conv' id='im-conv'>
            <Input
                className='chat-box-content-input'
                style={{ width: '100%' }}
                confirmType='send'
                value={content}
                onInput={(e) => setContent(e.detail.value)}
                enableNative={false}
            />
        </View>
    )
}

export default ImConv

684_1691411576.mp4

但这样就没有办法使用 confirmType='send' 确认按钮变成了【换行】

这就很丑陋，需要有一个按钮来确认这个输入

环境信息

👽 Taro v3.6.11

  Taro CLI 3.6.11 environment info:
    System:
      OS: Windows 10 10.0.19045    
    Binaries:
      Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
      npm: 6.14.18 - C:\Program Files\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: 3.6.11 => 3.6.11
      @tarojs/components: 3.6.11 => 3.6.11
      @tarojs/helper: 3.6.11 => 3.6.11
      @tarojs/plugin-framework-react: 3.6.11 => 3.6.11
      @tarojs/plugin-platform-alipay: 3.6.11 => 3.6.11
      @tarojs/plugin-platform-h5: 3.6.11 => 3.6.11
      @tarojs/plugin-platform-jd: 3.6.11 => 3.6.11
      @tarojs/plugin-platform-qq: 3.6.11 => 3.6.11
      @tarojs/plugin-platform-swan: 3.6.11 => 3.6.11
      @tarojs/plugin-platform-tt: 3.6.11 => 3.6.11
      @tarojs/plugin-platform-weapp: 3.6.11 => 3.6.11
      @tarojs/react: 3.6.11 => 3.6.11
      @tarojs/runtime: 3.6.11 => 3.6.11
      @tarojs/shared: 3.6.11 => 3.6.11
      @tarojs/taro: 3.6.11 => 3.6.11
      @tarojs/taro-h5: 3.6.11 => 3.6.11
      @tarojs/taro-loader: 3.6.11 => 3.6.11
      @tarojs/webpack5-runner: 3.6.11 => 3.6.11
      babel-plugin-transform-taroapi: 3.6.11 => 3.6.11
      babel-preset-taro: 3.6.11 => 3.6.11
      eslint-config-taro: 3.6.11 => 3.6.11
      react: ^18.2.0 => 18.2.0
      taro-ui: 3.1.0-beta.7 => 3.1.0-beta.7

补充信息

NOTE:

1. 使用 React.memo 并没有用，即便只渲染一次。
2. 使用 ClassComponent 没有用
3. 不是受控组件也没有用（既没有 value）