class Value extends React.Component {
    constructor(props) {
        super(props)
        this.inputRef = ""
        this.flag = true
    }
    render() {
        const isChangeable = isEditable && isTypeable
        return (
            <input
                ref={(c) => { this.inputRef = c }}
                type="text"
                value={value || ""}
                placeholder={placeholder}
                onCompositionStart={() => { this.flag = false }}
                onCompositionEnd={() => { this.flag = true }}
                onChange={() => setTimeout(() => {
                    if (this.flag && isChangeable) {
                        onChange(this.inputRef.value)
                    }
                }, 100)}
            />
    
        )
    }
}

try to solve the problem of onCompositionStart and onCompositionEnd,onChange. Debugging finds that only onCompositionStart events will be executed when entering Chinese, and input can only get the input value after adding these events.

related codes

/ / Please paste the code text below (do not replace the code with pictures)

is that the input Chinese on all devices is displayed normally? What you actually see is that the ios device will get the pinyin value accumulation under the above input method, and the Android and PC ends are normal?