Question

根据React Native API文档中的此链接： https://facebook.github.io/react-native/docs/0.59/textinput#isfocused

TextInput组件具有一个称为isFocused（）的方法。我将如何访问此方法？我必须使用裁判吗？

此外，我已经知道可以通过使用onFocus道具并设置状态管理器和基于onFocus更改输入状态的函数来达到相同的效果。但是，我很好奇我将如何使用这些组件方法，因为其他组件中也有其他方法。

我尝试使用此

<TextInput onChangeText={this.handleText} style={(this.isFocused()) ? styles.input : styles.lame} placeholder="Names"/>

但是似乎我可能不得不使用ref，因为即使方法应该是此组件的一部分，但似乎未定义。

Answer 1

您可以使用状态来处理输入焦点，如果您有多个输入也需要焦点状态，则只需为其创建多个状态即可。

class MyComponent extends React.Component {

   state = { isFocused: false }

   handleInputFocus = () => this.setState({ isFocused: true })

   handleInputBlur = () => this.setState({ isFocused: false })

   render() {
      const { isFocused } = this.state

      return (
        <View>
          <TextInput 
            onFocus={this.handleInputFocus} 
            onBlur={this.handleInputBlur}
            style={ isFocused ? styles.input : styles.lame}
          />
          <Text>Hello World</Text>
        </View>
      )
   }
}

Answer 2

isFocused（）应该在对TextInput的引用上调用。

import React, {useEffect, useRef} from 'react';
import {TextInput, BackHandler} from 'react-native';

function SearchBar() {
  const textInputReference = useRef(null);
  useEffect(() => {
    let backhandler = BackHandler.addEventListener(
      'hardwareBackPress',
      function() {
        if (textInputReference.current.isFocused()) {
          textInputReference.current.blur();
          return true;
        }
        return false;
      },
    );
    return () => {
      backhandler.remove();
    };
  }, []);
  return (
        <TextInput ref={textInputReference} />
  );
}

export default SearchBar;

Answer 3

According to its documentation

如果输入当前为焦点，则返回true；否则为false。否则为假。

我们如何实现这一目标？答案是useRef。

例如：

import React, { useRef } from 'react'
import { View, StyleSheet, TextInput, Button } from 'react-native'

const App = props => {

  const inputRef = useRef(null);

  const checkIsFocusedHandler = () => {
    const result = inputRef.current.isFocused();
    alert(result);
  }

  return (
    <View style={styles.container}>

      <TextInput ref={inputRef} style={styles.input} value="Abolfazl Roshanzamir" />
      <TextInput style={styles.input} />

      <Button title="Check isFocused" onPress={checkIsFocusedHandler} />

    </View>
  )
}

如果我们单击第一个TextInput，然后单击按钮，则结果为=> true ，

如果我们单击第二个TextInput然后单击按钮，则结果为=> false 。

Answer 4

使用TextInput组件的 onFocus 道具 InnerException : False Exception : System.NullReferenceException: Object reference not set to an instance of an object. at Microsoft.Azure.Commands.Billing.Cmdlets.Invoices.GetAzureRmBillingInvoice.ExecuteCmdlet() at Microsoft.WindowsAzure.Commands.Utilities.Common.AzurePSCmdlet.ProcessRecord() Message : Object reference not set to an instance of an object. StackTrace : at Microsoft.Azure.Commands.Billing.Cmdlets.Invoices.GetAzureRmBillingInvoice.ExecuteCmdlet() at Microsoft.WindowsAzure.Commands.Utilities.Common.AzurePSCmdlet.ProcessRecord() HelpLink : ErrorDetails : ErrorCategory : CloseError: (:) [Get-AzureRmBillingInvoice], NullReferenceException InvocationInfo : System.Management.Automation.InvocationInfo ScriptStackTrace : at <ScriptBlock>, <No file>: line 27

当TextInput处于焦点状态时，将调用

yourCallBack 函数

如何使用TextInput isFocused（）方法

4 个答案: