时间戳

首页 > 解决方案 > 通过 .map() React Native 绑定函数

reactjs - 通过 .map() React Native 绑定函数

问题描述

所以我在结合 .map() 和函数绑定的概念时遇到了一些麻烦。我使用 .map() 的方式与 ngFor 在 Angular 中的使用方式相同，以便在页面上为用户帐户中的每个项目放置一个自定义按钮组件。

这是一些示例代码：

class MyButton extends Component {
  constructor(props) {
    super();
    this.state = {
      progress: 0
    }
  }

  render() {
    return(
      <TouchableWithoutFeedback onPress={this.pressFunction}>
        (...more code inside)
      </TouchableWithoutFeedback>
    )
  }

  pressFunction = () => {
    (animate progress from 0 to 1 for some animation)
  }
}

/////////////////////////////////////////////////////////////////

class Parent extends Component {
  render() {
    return(
      {
        this.props.data.array.map(obj => {
          return(
            <View style={someStyle}>
              <MyButton data={obj} />
            </View>
          )
        })
      }
    )
  }
}

所以在父组件中，多个 MyButton 被正确渲染，每个都根据从数组中传递的对象。但是，当按下任何按钮时，所有 MyButtons 的所有 pressFunctions 都会触发。

我的问题是我猜，如何确保每个 MyButton 的每个 pressFunction 仅绑定到 MyButton 的特定实例？我在这里的范围有问题。

我的理解是

functionName = () => {}

应该正确地将函数绑定到实例，但我也尝试了旧方法，结果相同。

标签： reactjsreact-nativereact-native-androidreact-native-ios

解决方案

我通过在映射到 MyButton 的每个对象上创建一个动态 ref 来解决这个问题，使用数组中每个 obj 的唯一属性：

this.props.data.array.map(obj => {
  return(
    <View style={someStyle}>
      <MyButton ref={obj.name} data={obj} />
    </View>
  )
})

仍然不知道为什么我的它没有唯一地绑定没有 ref

推荐阅读