如何爲我的組件啓動此功能（React Native）？

Question

我有這片組件的代碼

class List extends Component {  
    ... 

    render() { 
    ... 
    return 
    <TouchableHighlight onPress={()=>this.props.clearFilter()}> 
    </TouchableHighlight> 
    ... 
    } 
    ... 
    } 

父：

class Nav extends Component { 
    ... 
    // render implements renderscene for navigator 

    renderScene(route, navigator){ 
    ... 
    return (
    <List 
     navigator={navigator} 
     clearFilter={this.props.clearFilter} 
     ref={component => this._list = component}/> 
    ); 
    } 

和：

export default class App extends Component { 

applyfilter(){ 
//... 
} 

    constructor(props){ 
     ... 
     this.applyfilter = this.applyfilter.bind(this); 
    } 
    clearFilter(){ 
    this.setState(
     { 
     _filter:null, 
     _filterValue:"", 
     },()=>{this.applyFilter();} 
    ); 

    _renderScene = ({ route }) => { 
     return <Nav ref={component => this._nav = component} clearFilter={this.clearFilter.bind(this)}/>; 
... 

} 

所以我一起從應用程序傳遞clearFilter()功能NAV ，Nav將它傳遞給List。當List按鈕被按下時，我希望App的clearFilter（）能夠觸發，但是由於某種原因它不會作爲函數計算。

每次按下按鈕，我都會得到undefined is not a function (evaluating '_this3.applyFilter()')。

如何從列表按鈕中觸發clearFilter for App？

Answer 1

只是一個錯字錯：您正在創建的功能applyfilter但你調用它作爲你的applyFilter功能clearFilter裏面。這就是爲什麼它拋出一個錯誤，它是undefined。

Answer 2

假設您在這裏沒有遺漏一些代碼，this.applyfilter似乎沒有在任何地方定義。

Answer 3

你的代碼沒有清晰的格式。看起來像你已經在類之外聲明瞭applyFilter。在類中的構造函數之後定義它。

個人而言，我更喜歡使用clearFilter={()=> {this.clearFilter()}}代替clearFilter={this.clearFilter.bind(this)}

同爲applyFilter。

class Button extends Components { 
 
    render(){ 
 
    return(
 
     <TouchableOpacity 
 
     onPress={()=>{ this.props.clearFilter() }} 
 
     > 
 
     </TouchableOpacity> 
 
    ); 
 
    } 
 
} 
 

 
class List extends Components { 
 
    render(){ 
 
    return(
 
     <Button 
 
     clearFilter={()=>{ this.props.clearFilter() }} 
 
     /> 
 
    ); 
 
    } 
 
} 
 

 
export default class Mainapp extends Components { 
 
    constructor(props){ 
 
    super(props); 
 
    this.state = {}; 
 
    } 
 

 
    clearFilter(){ 
 
    //// do something 
 
    this.applyFilter(); 
 
    } 
 

 
    applyFilter(){ 
 
    //// do something 
 
    } 
 

 
    render(){ 
 
    return(
 
     <View> 
 
     <List 
 
      clearFilter={()=>{ this.clearFilter() }} 
 
     /> 
 
     </View> 
 
    ); 
 
    } 
 
}