按下图标时的文本输入 .blur()答案

【问题标题】：Textinput .blur() when pressing Icon按下图标时的文本输入 .blur()
【发布时间】：2021-09-08 05:09:09
【问题描述】：

按下图标时，我希望 TextInput 失去焦点。我发现了这个：Unfocus a TextInput in React Native 并尝试了一切，但它只是不起作用。像这样我得到错误：

Undefined is not an object (evaluating '_this.myInput.blur')

我的代码：

<TextInputCustom
  ref={(ref) => { this.myInput= ref }}
 iconType={
          Platform.OS === "android" ? 
         isSearchbarFocused? 'chevron-left' : 
           'search'
          :'search'}
 iconPress= {() => { Platform.OS === "android" && isSearchbarFocused ?(setSearchbarFocused(false), this.myInput.blur()):(console.log("Hi")}}
/>

我的 TextInputCustom 看起来像这样：

const TextInputCustom = ({
  iconType,
  placeholder,
  onChange,
  onFocus,
  textContentType,
  autoCapitalize,
  autoCompleteType,
  iconPress,
  ref
}) => {
  return (
    <View style={styles.inputView}>
      <Icon name={iconType} onPress={iconPress} size={20}    
      />
      <TextInput
        style={{
          flex: 1,
          paddingHorizontal: 12,
        }}
        placeholder={placeholder}
        textContentType={textContentType}
        autoCapitalize={autoCapitalize}
        autoCompleteType={autoCompleteType}
        autoCorrect={false}
        onChangeText={(e) => onChange(e)}
        onFocus={onFocus}
      />
    </View>
  );
};

或者是错误，我使用自定义元素，所以我不能像这样使用 .blur？我做错了什么，我该怎么做？

【问题讨论】：

你需要获取 TextInput 的引用而不是包装组件
你使用类组件吗？
@Kai 我之前从未在 React Native 中使用过 Refs。我尝试将 ref={(ref) => { this.focus= ref }} 放入 Textinput 中，然后将 this.focus.blur() 放入上面的代码中。但现在不知何故它有时会工作，有时它不会并抛出同样的错误
@VasylNahuliak 不，我不知道。

标签： reactjs react-native react-native-textinput

【解决方案1】：

以createRef为例，您可以在线尝试https://snack.expo.io/@vasylnahuliak/6c94c6

import React, { Component, createRef } from 'react';
import {
  View,
  TouchableOpacity,
  Text,
  TextInput,
  StyleSheet,
} from 'react-native';

class App extends Component {
  constructor(props) {
    super(props);

     this.textInputRef = createRef();

  }

  handleIconPress = () => {
    this.textInputRef.current.blur();
  };


  render() {
    return (
      <View style={styles.root} >
        <TextInputCustom
          textInputRef={this.textInputRef}
          onIconPress={this.handleIconPress}
        />
      </View>
    );
  }
}

const TextInputCustom = ({ onChange, onIconPress, textInputRef }) => {
  return (
    <View style={styles.inputContainer}>
      <TouchableOpacity style={styles.icon} onPress={onIconPress}>
        <Text style={styles.emoji}>?️</Text>
      </TouchableOpacity>
      <TextInput
        style={styles.input}
        onChangeText={onChange}
        ref={textInputRef}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    paddingVertical: 48,
  },
  emoji: {
    fontSize: 40,
  },
  inputContainer: {
    flexDirection: 'row',
  },
  input: {
    flex: 1,
    marginLeft: 16,
    borderColor: 'black',
    borderWidth: 1,
  },
});

export default App;

【讨论】：