2017-04-25 6 views
0

私はReact Nativeでアプリを作っています。私は理解していない問題があります。TouchableHighlight OnPressが関数を呼び出さない

実際、私のリストのボタンを押すと、このボタンに関連するonPressプロパティは自分の関数を呼び出さない。

_onPressButton=() => { 
    Alert.alert("Lol"); 
} 

_renderRow (rowData, sectionID) { 
return (
    <TouchableOpacity style={styles.row} onPress={() => this._onPressButton}> 
    <Text style={styles.boldLabel}>{rowData.name}</Text> 
    <Text style={styles.label}>{rowData.art}</Text> 
    </TouchableOpacity> 
) 
} 

この2つの関数は、私のクラスのrender()の外にあります。レンダリングがあります:

render() { 
return (
    <View style={styles.container}> 
    <ListView 
     renderSectionHeader={this._renderHeader} 
     contentContainerStyle={styles.listContent} 
     dataSource={this.state.dataSource} 
     renderRow={this._renderRow} 
     renderFooter={this._renderFooter} 
     enableEmptySections 
     pageSize={15} 
    /> 
    </View> 
) 
} 
} 

私のボタンを押すと、何も起こりません。/。誰かがアイデアを持っていますか? 読んでいただきありがとうございます!

答えて

0

あなたは_onPressButton関数を呼び出していません。あなたが任意のパラメータを渡したい場合、あなたは矢印の機能のまわりでそれをラップすることができます

onPress={this._onPressButton} 

: あなたはこのように、矢印の機能を使用せずに、たonPressハンドラでこの関数を渡すことができます。あなたの現在のコードは、私は正しい方法は両方renderRow & onRowPressは、両方のこのような コンストラクタにバインドさ持っていることだと思いたonPressハンドラが呼び出されますが、あなたの_onPressButton機能

onPress={() => {this._onPressButton}} // _onPressButton is not invoked 
you have to invoke it as: 

{() => {this._onPressButton()}} 
+0

ありがとうございました!しかし、明らかに私はrenderRow = {this._renderRow.bind(this)}をレンダリングに書く必要がありました。なぜなのかご存知ですか? –

+0

jsxから呼び出すとき、 "this"キーワードの文脈が失われるので、それをバインドする必要があります。 私はコンストラクタで関数をバインドすることをお勧めします this._renderRow = this._renderRow.bind(this); または、_onPressButtonで行ったように、矢印機能を使用してください。 –

+0

ありがとうございました! –

1

を呼び出しません

onPress={() => {this._onPressButton('someParams')}} 

PS :

constructor (props) { 
    super(props) 

    this.renderRow = this.renderRow.bind(this) 
    this.onRowPress = this.onRowPress.bind(this) 

    } 

次にo n renderRow

renderRow (rowData) { 
    return (
     <TouchableOpacity onPress={() => this.onRowPress(rowData)} > 

     </TouchableOpacity> 
    ) 
    } 
関連する問題