た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は将来ユーザーによって挿入されますが、現在のところ再レンダリングの動作をテストしています

問題は、関数を介してパラメータを渡さずにaddMeta内の変数を定義すると問題がありますメソッドがバインドされているかどうかをテストする）上記表示され、それは自分のアプリケーションのクラッシュに

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

を結果として、私もそれをクリックせずにたonPressプロパティに関数を実行して、私がしなければ、しかし、あなたはを呼び出すですあなたはそれに括弧を追加this.addMeta：

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

ソリューション：

括弧を削除し、ことを確認してくださいというあなたは、その時点で、関連する引数を渡すことを、あなたの<Button>コンポーネントにaddMetaの受け継がメソッドを呼び出すとき：

<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

を。どのようにそれがaddMetaを実行している

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