CODEWITHSUNDEEP
bindingreact-native
Wasteland
Wasteland

Reputation: 5399

react-native onPress binding with an argument

The desired behaviour is to pass an argument (text) to the onClick handler to console.log it but it seems that I'm doing something wrong with the syntax.

If I leave the argument out as below, it's working fine:

export default class Nav extends Component {
  componentDidMount() {
    this.props.pickNumber(3);
  }

  onPress() {
    console.log('FOOOBAAR');
  }
  render() {
    return (
      <View>
        <Text>####################</Text>
        <Text>Intro Screen</Text>
        <Text>Number: {this.props.numbers}</Text>
        <TouchableHighlight onPress={this.onPress.bind(this)}>
          <Text>Go to Foo</Text>
        </TouchableHighlight>
      </View>
    );
  }

}

However, if I want to pass an argument to the onPress handler, it complains 'Cannot read property 'bind' of undefined.

export default class Nav extends Component {
  componentDidMount() {
    this.props.pickNumber(3);
  }

  onPress(txt) {
    console.log(txt);
  }
  render() {
    return (
      <View>
        <Text>####################</Text>
        <Text>Intro Screen</Text>
        <Text>Number: {this.props.numbers}</Text>
        <TouchableHighlight onPress={this.onPress('foo').bind(this)}>
          <Text>Go to Foo</Text>
        </TouchableHighlight>
      </View>
    );
  }

}

Thanks

Addition: If I change it to:

onPress={this.onPress.bind('foo')}

it does not work either.

Upvotes: 65

Views: 85249

Answers (6)

Gurjinder Singh
Gurjinder Singh

Reputation: 10329

Define function and call it onPress of Text. If you are iterating over array then you can also pass title

  selectText = (item) => {
            console.log(item) // will print Text Pressed
            alert(item)
      }
   return(
       <View>
       <Text onPress = {()=>this.selectText("Text Pressed")}>Press for Alert</Text>
       </View>
    }

Upvotes: 3

Nasreen Ustad
Nasreen Ustad

Reputation: 1712

try this

const onChangeHandler = index => { console.log(index) }
onPress={onChangeHandler.bind(this, index)}

Upvotes: 1

GulshanZealous
GulshanZealous

Reputation: 638

You can avoid binding the function in the constructor by binding it at the onPress value and passing the argument after 'this'. You can refactor your code like so,

export default class Nav extends Component {
  componentDidMount() {
    this.props.pickNumber(3);
  }

  onPress(txt) {
    console.log(txt);  // foo
  }
  render() {
    return (
      <View>
        <Text>####################</Text>
        <Text>Intro Screen</Text>
        <Text>Number: {this.props.numbers}</Text>
        <TouchableHighlight onPress={this.onPress.bind(this,'foo')}>
          <Text>Go to Foo</Text>
        </TouchableHighlight>
      </View>
    );
  }

}

The first argument is 'this' and any other arguments can be supplied after that which will be received in the same order.

Update : Can do this using closures too.

export default class Nav extends Component {
  componentDidMount() {
    this.props.pickNumber(3);
  }

  onPress = (this, txt) => () => {
    console.log(txt);  // foo
  }

  render() {
    return (
      <View>
        <Text>####################</Text>
        <Text>Intro Screen</Text>
        <Text>Number: {this.props.numbers}</Text>
        <TouchableHighlight onPress={this.onPress(this,'foo')}>
          <Text>Go to Foo</Text>
        </TouchableHighlight>
      </View>
    );
  }

}

Upvotes: 36

Binova Gautam
Binova Gautam

Reputation: 121

You should just pass one fat arrow function before calling the function.

onPress= {()=> this.handlePress(param)}

Upvotes: 12

TechnoTim
TechnoTim

Reputation: 3205

You can solve it with fat arrows too:

export default class Nav extends Component {

  handlePress = (text) => {
    console.log(text);
  }

  render() {
    return (
      <View>
        <Text>####################</Text>
        <Text>Intro Screen</Text>
        <Text>Number: {this.props.numbers}</Text>
        <TouchableHighlight onPress={() => this.handlePress('weeeeee')}>
          <Text>Go to Foo</Text>
      </TouchableHighlight>
    </View>
    );
  }
}

Upvotes: 25

inga
inga

Reputation: 3214

You can do the binding in the constructor by using ES6:

export default class Nav extends Component {
  constructor(props) {
    super(props);

    this.onPress = this.onPress.bind(this);
  }

and then

  onPress(txt) {
    console.log(txt);
  }

  render() {
    return (
      <View>
        <Text>####################</Text>
        <Text>Intro Screen</Text>
        <Text>Number: {this.props.numbers}</Text>
        <TouchableHighlight onPress={() => this.onPress('foo')}>
          <Text>Go to Foo</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

Upvotes: 73

Related Questions