如何检查在本机反应中完成的 TextInput 更改

Question

基本上，我需要在文本更改时点击搜索 API，但在 TextInput 的每次更改时调用 API 并不是一件好事。那么，这个组件中是否存在任何回调函数，当用户完成编辑（停止输入）时触发？如果我们在用户停止输入时触发 API，那将是最好的。

我试过onEndEditing，但是停止写入后没有触发

Answer 1

如果你想自动检测用户何时完成编辑，你可以这样做

 const [value, setValue] = React.useState('');
 const timeout = React.useRef(null);

 const onChangeHandler = (value) => {
   clearTimeout(timeout.current);
   setValue(value);
   timeout.current = setTimeout(()=>{
      searchFunction(value)
   }, 2000);
 }

  return (
    <View>
      <TextInput
        value={value}
        onChangeText={ (value) => {onChangeHandler(value)} }
      />
    </View>

这将在用户完成输入后 2 秒调用搜索功能，并且会在用户输入内容时刷新持续时间

或者您可以试试 onBlur，一旦输入不再聚焦，它们就会触发，而不会仅仅因为您完成输入而触发

Answer 2

请参考：

另外：

Debounce 函数应该在 render 方法之外的某个地方定义，因为每次调用它时它都必须引用同一个函数实例，而不是像现在这样创建一个新实例你把它放在 onChangeText 处理函数中。

定义去抖功能最常见的地方就在组件的对象上。这是一个例子：

CLASS 组件：

class MyComponent extends React.Component {
   constructor() {
     this.onChangeTextDelayed = _.debounce(this.onChangeText, 2000);
   }

   onChangeText(text) {
     console.log("debouncing");
   }

   render() {
     return <Input onChangeText={this.onChangeTextDelayed} />
   }
 }

功能组件：

 function MyComponent(props) {
   const onTextChange = (text) => {
     console.log(text)
   };

   const _onTextChangeHandler = _.debounce(onTextChangeHandler, 1000, []);

    return <Input onChangeText={_onTextChangeHandler} />

 }

如何检查在本机反应中完成的 TextInput 更改

How can I check the TextInput change completed in react native

reactjs

react-native

react-native-textinput