React Native Button组件OnPress事件失效及初始加载异常触发问题求助

你遇到的是React Native事件绑定的典型问题，我来帮你梳理清楚并解决：

问题根源 #

在items.template.js中，你给Button的onPress属性传了template.add()——这会导致组件渲染（屏幕初始加载）时就直接执行add函数，而不是把函数绑定为点击事件。因为JavaScript里，只要函数后面加了()就会立即调用，所以初始加载时控制台会打印日志；而点击按钮时，onPress拿到的是add()执行后的返回值（这里add没有返回值，实际是undefined），自然不会触发任何操作。

修复方案 #

只需要把onPress的值改为函数引用，去掉后面的括号即可：

修改items.template.js里的Button代码：

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

如果后续需要给add函数传递参数，记得用箭头函数包裹，避免立即执行：

// 示例：传递输入框的text参数
<Button onPress={() => template.add(template.state.text)} title="Add" />

额外优化提示 #

另外注意到你在items.template.js里重复导入了style，其实可以直接使用传入的style参数，删掉这行冗余导入即可：

// 删掉这行重复导入
import { style } from './items.style'

修改后的完整items.template.js代码：

import React from 'react';
import { Text, View, TextInput, Button } from 'react-native';

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>
  );
}

这样修改后，点击Add按钮就会正确触发add()函数，控制台会打印预期日志，初始加载时也不会意外执行函数了。

内容的提问来源于stack exchange，提问作者Kay