Question

因此，在合并.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，每个MyButton都根据数组中传递的对象进行。但是，当按下任何按钮时，将触发所有MyButton的所有pressFunction。

我的问题是，我想如何确保每个MyButton的每个pressFunction仅绑定到MyButton的特定实例？我在这里遇到问题了。

我的理解是

functionName = () => {}

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

Answer 1

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

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

仍然不知道为什么我的产品没有参考就没有唯一的绑定

Answer 2

您应该通过onPress作为道具。下面是更新的代码

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

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

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

class Parent extends Component {
  pressFunction = () => {
    (animate progress from 0 to 1 for some animation)
  }
  render() {
    return this.props.data.array.map(obj => {
      return(
        <View style={someStyle}>
          <MyButton 
            data={obj} 
            onPress={this.pressFunction}
          />
        </View>
      )
    })
  }
}

通过.map（）反应本机绑定函数

2 个答案: