Question

我是React原生的新手，所以这可能是一个愚蠢的问题。所以我想在React Native制作一个照片库应用程序。我从JSON格式的网页中检索链接并在库中显示它们。现在我使用JSX.Element数组来保存库中缩略图的格式，并使用TouchableHighlight在其onPress属性中调用函数。

      tempImageArray.push(
        <TouchableHighlight onPress={()=>this._onPressButton(indexNumber)}>            
        <Image source={{uri : this.state.dataSource}}/>
        </TouchableHighlight>);

现在我遇到的问题是每当我点击可触摸元素时，_OnPressButton函数会响应indexNumber的当前值，而不是在数组中推送它时的值。所以我猜测indexNumber的引用是传递给数组而不是它的值。我想传递indexNumber的值。

Answer 1

假设您正在push操作上进行迭代。如果是这样 - 这是经典的javascript闭包问题。请提供更多代码，以便更轻松地跳转到上下文并运行您的代码段。以下所有都是伪代码示例。

使用自动运行匿名函数将indexNumber存储在闭包中：

tempImageArray.push(
    <TouchableHighlight onPress={((storedNumber)=> (event) => this._onPressButton(storedNumber))(indexNumber)}>            
    <Image source={{uri : this.state.dataSource}}/>
    </TouchableHighlight>);

或者，为了使其更易于阅读和维护，请在单独的方法中封装处理程序创建：

     _makePressButtonHandler = (indexNumber) => (event) => { 
         this._onPressButton(indexNumber) 
     }
     _onPressButton = (indexNumber) => { 
       // ...do something 
     }

     // somewheare in render method:

    tempImageArray.push(
      <TouchableHighlight onPress={this._makePressButtonHandler(indexNumber)}>            
      <Image source={{uri : this.state.dataSource}}/>
      </TouchableHighlight>);

React Native Reference代替传递给JSX，Element Array中的值

1 个答案: