Question

我收到了这段代码

constructor(props){
    super(props);
    this.MyClick = this.MyClick.bind(this)
}
MyClick() {
  alert('ohoho')
};
AnyRequest = () => {
    if(this.state.Array.length > 0 && this.state.Loaded === true){
        return this.state.Array.map(function(Data){
            return(
              <View>
                <TouchableHighlight underlayColor="#ccc" onPress={this.MyClick}>
                    <Icon name="check" size={30} color="#2eb82e" />
                </TouchableHighlight>
              </View>

            );
        });
    }
};

我不知道为什么它不起作用。首先，当我在构造函数中使用MyClick = () =>而不是绑定函数时，它说undefined不是对象。一旦我在构造函数中绑定了我的函数，它就不再显示错误，但它看起来不像TouchableHighlight按钮。即使underlayColor也无效。

Answer 1

好的，从评论中我们可以得出结论，TouchableHighlight确实是可点击的。这只是onPress的语法不正确。对于没有很多绑定和ES6语法经验的开发人员来说，这是一个非常常见的错误。有answers已经涵盖了这一点，所以我不会深入研究它。相反，我将指出您可以在React Native中更正定义onPress的两种常用方法（此时还有multiple现有answers，但它们只是部分相关的）：

onPress TouchableHighlight道具要求将函数传递给它。所以{ }之间的任何东西都需要成为一个函数。执行此操作的第一种方式是使用箭头语法，我怀疑您做错了：

MyClick = () => {
  alert('ohoho')
};

// ... later on ...

<TouchableHighlight underlayColor="#ccc" onPress={this.MyClick}>
  <Icon name="check" size={30} color="#2eb82e" />
</TouchableHighlight>

请注意this.，因为正确引用正确的变量需要它。

第二种方式是在你正在做的时绑定方法，但实际上是在你传递给onPress的函数中调用它，如下所示：

constructor(props){
  super(props);
  this.MyClick = this.MyClick.bind(this);
}

MyClick() {
  alert('ohoho');
};

// ... later on ...

<TouchableHighlight
  underlayColor="#ccc"
  onPress={() => {
    this.MyClick();
  }}
>
  <Icon name="check" size={30} color="#2eb82e" />
</TouchableHighlight>

注意如何在{ }内定义箭头函数，然后在该函数中实际调用MyClick。

如果您不理解这些差异或犯这样的错误，那么我建议刷新ES6和ES7，因为这几乎是编写React Native代码的要求。有many resources在线帮助解决此问题。

Answer 2

最后我明白了。问题不在onPress函数中，而是在map函数中。一旦我创建新函数，它就创建了一个新范围，这意味着this不再引用AnyRequest函数。最后ES6箭头修好了它。

constructor(props){
super(props);
this.MyClick = this.MyClick.bind(this)
}
MyClick() {
alert('ohoho')
};
AnyRequest = () => {
if(this.state.Array.length > 0 && this.state.Loaded === true){
    return this.state.Array.map((Data) => (
          <View>
            <TouchableHighlight underlayColor="#ccc" onPress={() => 
                this.MyClick();
            }}>
                <Icon name="check" size={30} color="#2eb82e" />
            </TouchableHighlight>
          </View>
        ));
      }
   };

UnClickAble TouchableHighlight

2 个答案: