onPress與參數函數運行創建循環

Question

我已經這個組件具有一個簡單的按鈕，當我按下按鈕新的元應該被添加到顯示

Metas.js

import React, { Component } from 'react'; 
import { View, Text } from 'react-native'; 
import Meta from './Meta'; 
import Button from './Button'; 

class Metas extends Component { 
    componentWillMount() { 
     this.setState({ 
      metas: this.props.data, 
     }); 
    } 

    addMeta = (newMeta) => { 
     console.log('Adding new meta'); 
     /*this.props.navigator.push({ 
      id: 'Test' 
     });*/ 
     const metas = this.state.metas; 
     metas.push(newMeta); 
     this.setState({ metas }); 
     console.log(`Metas: ${metas}`); 
    } 

    renderData =() => { 
     console.log('rendering metas data'); 
     return this.state.metas.map(meta => <Meta key={Math.random()} name={meta} />); 
    } 

    render() { 
     return (
      <View> 
       { this.renderData() } 
       <View> 
        <Text>{this.state.metas.length} Metas</Text> 
        <Button 
         text='+' 
         color='#8783FF' 
         fontColor='white' 
         size='50' 
         fontSize='25' 
         onPress={this.addMeta('New Meta')} 
        /> 
       </View> 
      </View> 
     ); 
    } 
} 

export default Metas; 

的paremeter的功能addMeta將被插入到未來的用戶，但我目前只是測試如何重新渲染工程

問題是，如果我通過函數沒有參數，這是爲了測試該方法是否被綁定） ，但如果我做如上顯示，它運行在onPress屬性的函數沒有我，甚至點擊它，導致我的應用程序的崩潰

Button.js

import React, { Component } from 'react'; 
import { View, Text, TouchableNativeFeedback } from 'react-native'; 

class Button extends Component { 
    render() { 
     const { buttonStyle, centerHorizontally, textStyle } = styles; 
     const { text, onButtonPress } = this.props; 

     return (
      <TouchableNativeFeedback onPress={onButtonPress}> 
       <View style={buttonStyle}> 
        <View style={centerHorizontally}> 
         <Text style={textStyle}>{text}</Text> 
        </View> 
       </View> 
      </TouchableNativeFeedback> 
     ); 
    } 
} 

const styles = { 
    buttonStyle: { 
     borderRadius: 100, 
     justifyContent: 'space-around', 
     height: parseInt(this.props.size, 10), 
     width: parseInt(this.props.size, 10), 
     backgroundColor: this.props.color 
    }, 
    /*TODO: use text align center instaed*/ 
    centerHorizontally: { 
     flexDirection: 'row', 
     justifyContent: 'space-around' 
    }, 
    textStyle: { 
     fontWeight: 'bold', 
     fontSize: parseInt(this.props.fontSize, 10), 
     lineHeight: parseInt(this.props.fontSize, 10) 
      + Math.floor(parseInt(this.props.fontSize, 10)/10) + 1, 
     color: this.props.fontColor 
    } 
}; 

export default Button; 

Answer 1

我看到您在執行渲染組件時正在執行addMeta。我不知道這是否是故意的，但是這會導致您在按下按鈕之前添加New Meta。

代替執行喜歡這裏的功能：

onPress={this.addMeta('New Meta')} 

嘗試是這樣的：

onPress={() => {this.addMeta('New Meta')}}

Answer 2

您是調用this.addMeta當你加括號吧：

<Button 
    text='+' color='#8783FF' 
    fontColor='white' size='50' 
    fontSize='25' 
    onPress={this.addMeta('New Meta')} 
<!-- These braces -----^----------^   
     cause the function to execute   
--> 
/> 

解決方案：

刪除括號，並確保你，當你調用addMeta的傳下來的方法在你的<Button>組件，您在相關的參數傳遞在這一點上：

<Button 
    text='+' color='#8783FF' 
    fontColor='white' size='50' 
    fontSize='25' 
    onPress={this.addMeta.bind(this)} 
    <!-- 
    ensure you bind this method to 
    local component scope 
    (You can do this in the constructor instead 
    if here if you like) 
    --> 
/> 

Button.js

class Button extends Component { 
    handleOnPress(){ 
    this.props.onPress(parameterToPass); 
    } 

    render() { 
    const {buttonStyle, centerHorizontally, textStyle } = styles; 
    const { text } = this.props; 

    return (
     <TouchableNativeFeedback 
      onPress={this.handleOnPress}> 
     <View style={buttonStyle}> 
      <View style={centerHorizontally}> 
      <Text style={textStyle}>{text}</Text> 
      </View> 
     </View> 
     </TouchableNativeFeedback> 
    ); 
    } 
} 

Answer 3

我不知道爲什麼，但這應該工作;

<Button 
 
    text='+' 
 
    color='#8783FF' 
 
    fontColor='white' 
 
    size='50' 
 
    fontSize='25' 
 
    onPress={this.addMeta.bind(null, 'New Meta')} 
 
/>