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

【问题标题】：Finding the specific child of a component in react-native在 react-native 中查找组件的特定子项
【发布时间】：2019-01-06 06:51:15
【问题描述】：

我正在制作这些徽章或筹码

使用代码：

<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>

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

【问题讨论】：

标签： javascript reactjs react-native badge

【解决方案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>
    );
  }
}

【讨论】：

非常感谢，我怎么会错过。