Question

我有这个组件有一个简单的按钮，当我按下按钮时，一个新的Meta应该被添加到显示器

Metas.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;

用户将在未来插入函数addMeta的参数，但我目前正在测试重新渲染的工作方式

问题是，如果我没有通过函数传递任何参数，并在addMeta中定义一个变量，它的工作完美（这是测试该方法是否绑定），但如果我按上面显示，它运行函数onPress属性没有我甚至点击它，导致我的应用程序崩溃

Button.js

$questionAnswer = json_decode($data->question,true);
foreach ($questionAnswer as $key => $value) {
  $question = $value['question'];

  echo $question."<br>";
  // value['sub'] contains the array of 'subs', so you can loop through that the same way
  foreach ($value['sub'] as $sub) {  // since the key will be 0,1,2 you might not need it here, so I omitted it.
      echo $sub."<br>"; 
  }
}

Answer 1

我在渲染组件时看到你正在执行New Meta。我不知道它是否是故意的，但它会导致在按下按钮之前添加onPress={this.addMeta('New Meta')}。

而不是执行这里的功能：

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

尝试这样的事情：

<Button text='+' color='#8783FF' fontColor='white' size='50' fontSize='25' onPress={this.addMeta.bind(null, '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

我不知道为什么但这应该有用;

{{1}}

带参数的onPress函数运行创建循环

3 个答案: