Question

我正在尝试从rxjs复制debounceTime功能。我从Angular看到了这个例子：

    fromEvent(this.input.nativeElement, 'keyup')
      .pipe(
        map(event => event.target.value),
        debounceTime(400),
        distinctUntilChanged(),
      )
      .subscribe(val => console.log(val));

我在本机中进行复制：

export default function SearchScreen() {
  const [text, setText] = useState('');
  function onChangeHandler(event) {
    of(event)
      .pipe(
        map(event => event.nativeEvent.text),
        debounceTime(400),
      )
      .subscribe(val => console.log(val));
  }
  return (
    <View>
      <View>
        <TextInput
          value={text}
          onChangeText={text => setText(text)}
          onChange={onChangeHandler}
        />
      </View>
    </View>
  );
}

但是我找不到使用fromEvent的方法。相反，我使用了of。但是debounceTime无法正常工作。

Answer 1

尝试使用Subject替换changeHandler并删除onChangeText和value属性

export default function SearchScreen() {
  const [text, setText] = useState('');
  const changeHandler=new Subject()
  changeHandler.asObservable()
      .pipe(
        map(event => event.nativeEvent.text),
        debounceTime(400),
      )
      .subscribe(val => console.log(val));
  
  return (
    <View>
      <View>
        <TextInput
          onChange={evt=>changeHandler.next(evt)}
        />
      </View>
    </View>
  );
}

如何在反应原生textInput

1 个答案: