javascript - How to handle onPress function react -


i using react native nativebase components, , having problem calling _dostuff function. tried call

onpress={this._dostuff.bind(this)} 

but keep receiving

cannot read 'dostuff' of undefined

_dostuff(){  console.log('hi');    }   _getlist() {  return this.state.listdata.map(function(data, i){ return(    <view key={i}>   <listitem style={styles.listitemcontain}>   <button transparent onpress={this._dostuff.bind(this)}>      <view>     <thumbnail source={{uri: data.icon}}  style={styles.thumbnailstyle}/>     <text style={styles.title}>{data.name}</text>     <text note style={styles.text}>{data.vicinity}</text>     </view>       </button>    </listitem>   </view>  );  }); 

this context lost inside .map loop. if using es6, try use fat arrow functions shown below.

_getlist() {   return this.state.listdata.map((data, i) => {  return(      <view key={i}>    <listitem style={styles.listitemcontain}>    <button transparent onpress={this._dostuff.bind(this)}>        <view>      <thumbnail source={{uri: data.icon}}  style={styles.thumbnailstyle}/>      <text style={styles.title}>{data.name}</text>      <text note style={styles.text}>{data.vicinity}</text>      </view>        </button>      </listitem>    </view>    );   });

if cant use es6 on project due various reasons use alternative approach(old school) shown below...

_getlist() {   return this.state.listdata.map(function(data, i){  var = this;  return(      <view key={i}>    <listitem style={styles.listitemcontain}>    <button transparent onpress={that._dostuff.bind(that)}>        <view>      <thumbnail source={{uri: data.icon}}  style={styles.thumbnailstyle}/>      <text style={styles.title}>{data.name}</text>      <text note style={styles.text}>{data.vicinity}</text>      </view>        </button>      </listitem>    </view>    );   });


Comments