javascript - UnClickAable TouchableHighlight

我得到了这个代码

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也无效。

最佳答案

好的，因此从注释中我们可以得出结论，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可以帮助您。

关于javascript - UnClickAable TouchableHighlight，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48852987/