Question

我使用React Native构建了自己的按钮组件，并且试图在我的代码中使用它。我现在想要做的就是让它记录控制台消息，并且由于某种原因它没有这样做。

按钮组件

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

class Button extends Component {
  render(){
    const { onPress, children } = this.props;
    const { buttonStyle, textStyle } = styles;

    return (
      <TouchableOpacity onPress={ onPress } style={ buttonStyle }>
        <Text style={ textStyle }>
          { children }
        </Text>
      </TouchableOpacity>
    );
  }
}

使用按钮的代码

class FlashcardMenuDetail extends Component {
  onButtonPress() {
    console.log('You pushed the button');
  }

  render() {
    const { title } = this.props.flashcard;

    return (
      <Card>
        <CardItem>
          <Button onpress={this.onButtonPress.bind(this)}>
            { title }
          </Button>
        </CardItem>
      </Card>
    );
  }
}

我可以按下按钮，但控制台窗口上什么都没有显示。

Answer 1

您创建的按钮中没有箭头功能onPress使用该功能时，由于导入了返回值，因此仅保留了控制台日志。您必须添加箭头功能。

export const makeButton = (props) => {
    const { title = "title", buttonStyle = {}, textStyle = {}, onPress } = props;

    return (
        <TouchableOpacity onPress={() => onPress} style={buttonStyle}>
            <Text style={textStyle}>{props.title}</Text>
        </TouchableOpacity>
    );
};

用法

import { makeButton } from 'path/makeButton.js';


      <Card>
        <CardItem>
         <makeButton
            title="get console.log"
            onPress={() => onButtonPress() }
            buttonStyle ={{ /* some styles for button */ }}
            textStyle={{ /* styles for button title */ }}
        />
        </CardItem>
      </Card>

我建立了自己的按钮组件，但无法使用

1 个答案: