Question

我创建了这个简单的基础＆＃39;动态创建多个Box＆＃39;组件（通过renderBoxes（）方法）。当按下其中一个框组件时，我想知道所有动态创建的Box组件中的哪一个被按下。有办法吗？我们要使用＆＃39;键吗？

import data from './dataFile.json';

class Base extends Component {

  state = {calendarData: []};

  componentWillMount() {
    //storing json data in the state
    this.setState({ calendarData: data });
  }

  onBoxPress() {

    // HOW TO ACCESS WHICH BOX COMPONENT WAS PRESSED?

  }   

  renderBoxes() {
    return this.state.calenderData.map(ride => {
      <Box
        key={ride.id}
        onPress={this.onBoxPress}>
      </Box>
    });
  }

  render() {
    return(
      <View>
        { this.renderBoxes() }
      </View>
    );
  }
}

请提供一个简短的理由。感谢。

Answer 1

React在内部使用key道具来优化虚拟渲染。虽然可以用于将信息传递回父母，但它可能不应该。（事实上，在开发模式下，如果您尝试访问关键道具，我认为您会收到警告。）

相反，您可以将onPress回调包装在一个关闭ride变量的匿名函数中：

  <Box
    key={ride.id}
    onPress={() => this.onBoxPress(ride)}>
  </Box>

然后，您可以在onBoxPress回调中接收乘车：

onBoxPress(ride) {
  // do something with the ride
}

编辑：

使用匿名函数包装器具有额外的好处，即正确绑定回调函数的this上下文。如果您不使用包装功能，则必须手动bind：

  <Box onPress={this.onBoxPress.bind(this)}></Box>

或者，要自动绑定this上下文，您可以使用类属性语法：

onBoxPress = () => {
  // `this` is now bound correctly
  this.setState(...)
}

React Native - 如何获取数组映射组件的键

1 个答案: