react-native中TextInput的onBlur事件中的问题

Question

我想在按下"Do Some Work"按钮但是在调用任何聚焦TextInput的onBlur事件之后执行一些任务.

这是我的示例代码: -

'use strict';
var React = require('react-native');
var {AppRegistry,View,Text,ScrollView,TextInput,TouchableOpacity} = React;

var MyApp = React.createClass({
    doSomeWork: function () {
        console.log("doSomeWork called....");

    },
    render: function () {
        return (
            <View>
                <TouchableOpacity style={{padding:10,alignItems:"center",backgroundColor:"blue"}}
                                  onPress={this.doSomeWork}>
                    <Text>Do Some Work</Text>
                </TouchableOpacity>
                <View style={{height:400}}>
                    <ScrollView keyboardShouldPersistTaps={true}>
                        <View>
                            <TextInput ref="first" onBlur={()=>{console.log("TextInput 1 blurred....")}}/>
                        </View>
                        <View>
                            <TextInput ref="second" onBlur={()=>{console.log("TextInput 2 blurred....")}}/>
                        </View>
                        <View>
                            <TextInput ref="third" onBlur={()=>{console.log("TextInput 3 blurred....")}}/>
                        </View>
                    </ScrollView>

                </View>
            </View>
        );
    }
});
AppRegistry.registerComponent('nativeApp', () => MyApp);

我试着打电话

this.refs.first.blur()

手动,但这是在异步,我不知道TextInput的事件是否已调用.

任何帮助将不胜感激.

Answer 1

为我工作

  import React, { useState } from 'react';
    import { TextInput } from 'react-native';
    
    const MyTextInput = () => {
      const [value, setValue] = useState('');
    
      const handleBlur = () => {
        console.log('Input lost focus');
      }
    
      return (
        <TextInput
          value={value}
          onChangeText={setValue}
          onBlur={handleBlur}
        />
      );
    }