react-native onPress與參數綁定

期望的行爲是將參數（文本）傳遞給onClick處理程序，以便console.log它，但似乎我在語法上做錯了什麼。react-native onPress與參數綁定

如果我離開的說法列如下，它的正常工作：但是

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

它也不起作用。

來源

2017-03-25 Wasteland

可以使用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> 
    ); 
    } 
}

來源

2017-03-25 15:47:09 inga

它消除了錯誤，但「富」字符串被無我，甚至點擊自動console.logged。 – Wasteland

對不起，我更新了我的答案。您需要在this.onPress（'foo'）之前添加（）=>。 – inga

就是這樣。謝謝。你能解釋爲什麼我需要添加一個胖箭頭功能嗎？謝謝 – Wasteland

可避免在onPress值和傳球結合它綁定在構造函數'this'之後的論點。構造模式很好，但我進入OO的土地越多，感覺就越令人討厭。你可以重構你的代碼像這樣，

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

}

第一個參數是「本」和任何其他參數可以之後將在同一順序接收來提供。

來源

2017-07-28 10:50:11 GulshanZealous

你可以用脂肪箭頭也解決它：

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

來源

2017-11-05 22:00:35 TechnoTim

react-native onPress與參數綁定

回答

相關問題