binding - method - enlace onPress reactivo-nativo con un argumento

react event

Question

El comportamiento deseado es pasar un argumento (texto) al controlador onClick a console.log pero parece que estoy haciendo algo mal con la sintaxis.

Si dejo el argumento como sigue, está funcionando bien:

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

}

Sin embargo, si quiero pasar un argumento al controlador onPress, se queja "No se puede leer la propiedad ''bind'' de indefinido.

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

}

Gracias

Adición: Si lo cambio a:

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

Tampoco funciona.

Answer 1

Puede evitar vincular la función en el constructor vinculándola en el valor de onPress y pasando el argumento después de "esto". El patrón de constructor está bien, pero cuanto más entro a OO land, más molesto se siente. Puedes refactorizar tu código como tal,

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

}

El primer argumento es "esto" y cualquier otro argumento se puede proporcionar después del que se recibirá en el mismo orden.

Answer 2

Puedes hacer el enlace en el constructor usando ES6:

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

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

y entonces

  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 3

Solo debes pasar una función de flecha gruesa antes de llamar a la función.

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

Answer 4

También puedes resolverlo con flechas gruesas:

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