如何为我的组件启动此功能（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> 
 
    ); 
 
    } 
 
}