Question

我有一个带有onPress事件的按钮我试图简单地控制日志按钮被成功按下。

按钮位于我的模板文件中，我将这部分代码提取到一个单独的文件中，我已经为我的tyles做了同样的事情。

当我按下添加按钮时，与按下相关联的add（）函数不会触发，因此console.log不会显示。

但是console.log确实会在屏幕的初始加载时显示（我不知道为什么会这样）

items.screen.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
import style from './items.style'
import template from './items.template';

export default class ItemsScreen extends Component {

    static navigationOptions = {
        title: "Items"
    }

    constructor(props) {
        super(props);
        this.state = { text: '' };
    }

    add() {
        console.log("pressed add button");
    }


    render() {
        return template(this, style);
    }

}

items.template.js

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

export default (template, style) => {
    return (
        <View style={style.container}>
            <TextInput
                style={{ width: 300 }}
                value={template.state.text}
                onChangeText={(text) => template.setState({ text })}
            />

            <Button
                onPress={template.add()}
                title="Add"
            />
        </View>
    );
}

Answer 1

您没有为on press事件分配template.add，而是代码正在执行add函数并尝试将结果分配给onPress事件。

我发现以下两个选项要比其他建议更清晰：

创建本地onPress处理程序（items.template）

onPress = () => {
  template.add();
}

然后

onPress={this.onPress} //note the lack of parentheses `()`

或

创建内联函数

onPress={() => template.add()}

Answer 2

你应该在属性中传递函数，而不是函数调用，所以它应该是

        <Button
            onPress={template.add.bind(template)}
            title="Add"
        />

React Native - OnPress按钮不起作用

2 个答案: