Question

*注[已解决] *

 [React-Native-Elements][1]
 issue : SearchBar missing functions #877
 soln  : updated react-native-elements package from 1.0.0.0-beta2 -> 1.0.0.0-beta4

根据DOCS，我的目标是能够在搜索栏组件上调用focus()

<SearchBar
  ref={search => this.search = search}
  onClearText={()=>this.handleOnClearText()}
/>

然而，当我捕捉到onClearText()动作时，我无法呼叫：

handleOnClearText = () => {
    if(this.search != null)
        this.search.focus() . //=====> Error here
}

我收到错误：

ExceptionsManager.js：65 TypeError：_this.search.focus不是功能

我可以引用我的SearchBar组件，但缺少focus()方法。

完整代码：

import React, { Component } from "react";
import {Text,View,StyleSheet,Platform,Keyboard,TextInput} from "react-native";
import {SearchBar} from "react-native-elements";

export default class ContentScreen extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
        searchBarText : "",
        dimContent : false
    };
}

static navigationOptions = ({ navigation }) => {
    return {     
        header: navigation.state.params.header ? undefined : 
        navigation.state.params.header,
        title: 'TITLE'
    };
};

handleSearch = () => {
    Keyboard.dismiss();
};

hideHeader = () =>{
    this.props.navigation.setParams({ header: null});
    this.setState({dimContent : true})
}

viewHeader = () =>{
    this.props.navigation.setParams({header: undefined});
    this.setState({dimContent : false})
}

handleContentDimmer= ()=>{
    if(this.state.dimContent){
       return(styles.containerDim)
    }
    else{return(styles.container)}
}

handleChangeText = (searchBarText) => {
    this.setState({
        searchBarText : searchBarText
    })
}

handleCancel = () => {
  this.setState({
    searchBarText : ""
  },()=>{
    this.viewHeader();
  });
}



handleOnClearText(){
    this.setState({
    searchBarText : ""
},()=>{
    if(this.search != null){
        console.log(this.search);
        this.search.focus(); //====================> ERROR HERE
    }})
}

render() {
    if(this.state.searchBarText.length > 1){
        return(
            <View>
            <SearchBar    
                platform={Platform.OS === "ios" ? "ios" : "android"}
                ref={ref => this.search = ref}
                lightTheme
                clearIcon
                placeholder      ='...Search...'
                returnKeyType    ='search'
                cancelButtonTitle="Cancel"
                onCancel        ={()=>this.handleCancel()}
                onClearText     ={()=>this.handleOnClearText()}
                onFocus         ={()=>this.hideHeader()}
                onSubmitEditing ={()=>this.handleSearch()}
                onChangeText    ={ searchBarText => this.setState({searchBarText})}
            />
            </View>
        );
    }

    return (
        <View style={this.handleContentDimmer()}>
            <SearchBar
                platform={Platform.OS === "ios" ? "ios" : "android"}
                ref={ref => this.search = ref}
                lightTheme
                clearIcon
                placeholder="Search..."
                returnKeyType='search'
                cancelButtonTitle="Cancel"
                onCancel        ={()=>this.handleCancel()}
                onClearText     ={()=>this.handleOnClearText()}
                onFocus         ={()=>this.hideHeader()}
                onSubmitEditing ={()=>this.handleSearch()}
                onChangeText    ={(searchBarText)=>this.handleChangeText(searchBarText)}
            />      
        </View>
    );
  }
}

// ___Styles__
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  containerDim: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,.2)'
  }
});

Answer 1

由于您正在使用v1.0.0.beta4，因此它不支持onClearText，您需要将其替换为onClear。

此外，由于您已经引用了this参数

<SearchBar
  ref={search => this.search = search}
  onClear={()=>this.handleOnClearText()} <== Here
/>

因此，请勿使用胖箭头功能

handleOnClearText () {
    if(this.search != null)
        this.search.focus()
}

React Native（React Native Elements）SearchBar缺失函数focus（）blur（）

1 个答案: