如何基于React Native TextInput的change事件创建RxJS Observable

1. 基础ref用法错误：const sqftRef = useRef().current 会直接读取初始化的null值，后续ref绑定到TextInput组件后，这个变量也不会同步更新。
2. 核心报错原因：React Native采用合成事件体系，TextInput不是原生DOM元素，没有addEventListener、removeEventListener接口，而RxJS的fromEvent默认依赖这两个方法实现事件绑定，因此会抛出你遇到的错误。

使用Subject桥接React的事件回调和RxJS流是React体系下结合RxJS的标准实现，代码逻辑简单易维护：

import { useRef, useEffect } from 'react'
import { TextInput } from 'react-native'
import { Subject } from 'rxjs'

const YourComponent = () => {
  // 仅当需要操作TextInput组件实例时需要这个ref，不需要可以省略
  const sqftRef = useRef(null)
  // 事件流Subject存在ref中，避免组件重渲染时被重置
  const inputChange$ = useRef(new Subject()).current

  useEffect(() => {
    // 订阅输入事件流
    const subscription = inputChange$.subscribe(e => {
      // 此处可获取完整的原生事件对象
      console.log('原生事件：', e.nativeEvent)
      // 输入的文本内容可从e.nativeEvent.text直接获取
    })

    // 组件卸载时取消订阅，避免内存泄漏
    return () => subscription.unsubscribe()
  }, [inputChange$])

  return (
    <TextInput
      ref={sqftRef}
      label='Sqft'
      mode='flat'
      textContentType='none'
      autoCapitalize='none'
      keyboardType='numeric'
      autoCorrect={false}
      value={String(formValues.sqft)}
      dense
      underlineColor={colors.colorOffWhite}
      onChangeText={(text) => setText(text)}
      // 事件触发时把事件对象推送到流中
      onChange={e => inputChange$.next(e)}
      style={styles.inputStyles}
      theme={inputTheme}
    />
  )
}

内容的提问来源于stack exchange，提问作者Jo Momma