私のコンポーネント（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はそれをListに渡します。リストのボタンを押すと、私はアプリケーションのclearFilter（）を起動させたいが、それは何らかの理由で関数として計算されないためである。

ボタンを押すたびにundefined is not a function (evaluating '_this3.applyFilter()')になります。

ListのボタンからアプリケーションのclearFilterを起動するにはどうすればよいですか？

Answer 1

ジャストタイプミスミス：あなたはapplyfilterとしての機能を作成しているが、あなたはあなたのclearFilter関数内applyFilterとしてそれを呼び出しています。だからこそ、それはundefinedというエラーを投げかけています。

Answer 2

ここでいくつかのコードが欠落していないと仮定すると、this.applyfilterはどこにも定義されていないようです。

Answer 3

コードが明確に書式設定されていません。クラスの外でapplyFilterを宣言したようです。クラスの内部でコンストラクタの後に定義します。

は個人的に私はapplyFilterためclearFilter={()=> {this.clearFilter()}}代わりのclearFilter={this.clearFilter.bind(this)}

それを用い好みます。

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> 
 
    ); 
 
    } 
 
}