在react-native中查找组件的特定子项

Question

我正在创建像这样的徽章或筹码

使用代码：

<View style = {{flexDirection: 'row', marginLeft: 10, marginTop: 5}}>
{this.state.eduModes.map((v, i) => {
  return (
      <Badge
        key={i}
        onPress = {(i) => {
          console.log(i);
        }}
        value={v}
        containerStyle= {{marginRight: 5}}
        textStyle={{ color: 'orange' }}
      />
  )
})}
</View>

用户从创建徽章的选择器中选择值，现在我要的是当用户单击徽章时应删除徽章。那么，如何访问用户单击的特定徽章，使其在重新渲染时消失？

Answer 1

您可以创建一个新的内联函数，将应该删除的徽章索引发送到删除函数。

示例

class App extends React.Component {
  handlePress = index => {
    this.setState(previousState => {
      const eduModes = [...previousState.eduModes];
      eduModes.splice(index, 1);
      return { eduModes };
    });
  };

  render() {
    return (
      <View style={{ flexDirection: "row", marginLeft: 10, marginTop: 5 }}>
        {this.state.eduModes.map((v, i) => {
          return (
            <Badge
              key={i}
              onPress={() => this.handlePress(i)}
              value={v}
              containerStyle={{ marginRight: 5 }}
              textStyle={{ color: "orange" }}
            />
          );
        })}
      </View>
    );
  }
}