在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

您可以創建一個新的內聯函數，將應該刪除的標志的索引發送到remove函數。

例

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>
    );
  }
}