react-native onPressバインディングと引数付き

Question

希望の動作は、onClickハンドラに引数（テキスト）を渡してconsole.logに渡すことですが、構文に何か間違っているようです。私は以下のように引数を省略した場合

、それがうまく働いています：

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

} 

をしかし、私はたonPressハンドラに引数を渡したい場合は、それが未定義のバインド 『「プロパティを読み取ることができません』文句を言います。

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

} 

おかげ

追加： 私はそれを変更した場合：

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

それはどちらか動作しません。

Answer 1

あなたはES6を使用して、コンストラクタに結合行うことができます。

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

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

、その後

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

あなたがたonPress値と通過でそれを結合することにより、コンストラクタに結合機能を回避することができます'this'の後の引数。コンストラクタのパターンはうまくいきますが、私がオブジェクト指向の土地に行くほど、それは気持ちが悪くなります。あなたは、最初の引数は「この」で、他の引数は同じ順序で受信されることの後に供給することができ、そのよう

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

} 

をあなたのコードをリファクタリングすることができます。

Answer 3

あなたは太りすぎの矢印でそれを解決することができます

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