按下图标时输入 .blur()

Question

按下图标时，我希望 TextInput 失去焦点。我发现了这个：并尝试了所有方法，但它就是不起作用。像这样我得到错误：

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？我做错了什么，我该怎么做？

Answer 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;

按下图标时输入 .blur()

Textinput .blur() when pressing Icon

reactjs

react-native

react-native-textinput