Rax 移动端开发钉钉小程序 IOS 无法输入中文，光标消失问题记录

使用 Rax 框架开发企业内部钉钉小程序应用，实现表单输入时再正常不过的需求，这里我用到的是 fusion mobile 组件库及一些基础组件来构建我们的应用，在实现获取用户输入使用的是 Input 组件实现（文档地址：https://rax.js.org/docs/components/meet-input），这个Input组件支持单行和多行输入，可以应对大部分的应用场景。在安卓端是没有问题的，但是到了移动端会出现输入光标消失，输入文本获取不到，看上去像是卡住了一下，这肯定是不能接受的，这里记录探索解决 IOS 输入卡住问题的过程。

1.尝试启用 composition

这是去 fusion mobile 社区里问到的解决办法，但是试了一下不太好用，问题没有解决，示例代码如下：

import {createElement,useRef,useState} from "rax";
import {Input} from "@alifd/meet";

export default ()=>{
    const inputChinese = useRef(false);
    const [val,setValue] = useState()
    return <Input
        value={val}
        onCompositionStart={()=>{
            inputChinese.current = true;
        }}
        onCompositionEnd={(e)=>{
            inputChinese.current = false;
            setVal(e.target.value);
        }}
    />
}

2.替换 rax-textinput 组件，使用非受控组件（受控组件依然是有问题的）

这是一个社区里的大佬使用的方案，直接借鉴过来用，结合第一步的操作，就是换了组件而已，但是虽然能用了，但是小问题很多，有些要求都不能实现，比如多行输入时不能自适应输入框的高度显示全部内容，因此也没有单纯的使用这种方式。

示例代码如下：

import {createElement,useRef} from "rax";
import TextInput from "rax-textinput";

export default ()=>{
    const inputChinese = useRef(false);
    const valueRef = useRef();
    return <TextInput
        value={valueRef.current}
        onCompositionStart={()=>{
            inputChinese.current = true;
        }}
        onCompositionEnd={(e)=>{
            inputChinese.current = false;
            valueRef.current = e.target.value;
        }}
    />
}

3.最终方案：替换钉钉小程序原生组件 textarea,依然使用非受控组件（受控组件问题依然存在），可以不启用 composition 或者使用受控组件并禁用 native，即设置 enableNative={false}

示例代码如下：

import {createElement,useRef,useState} from "rax";
import TextInput from "rax-textinput";

export default ()=>{
    const inputChinese = useRef(false);
    const valueRef = useRef();
    return <TextInput
        value={valueRef.current}
        onCompositionEnd={(e)=>{
            valueRef.current = e.target.value;
        }}
    />
}

总结

无论是哪种输入框，只要是受控组件都会有问题，只能使用非受控组件。
非受控组件的话可以使用原生的小程序 textarea 组件或者 rax-textinput 组件，单行文本可以使用rax-textinput,多行文本的话则使用原生的 textarea 组件。