react-native onPress binding with an argument

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

try this

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

Answer 5

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

}

Answer 6

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

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