React 原生单选组件答案

【问题标题】：React 原生单选组件
【发布时间】：2022-01-23 12:02:19
【问题描述】：

我正在尝试实现一个简单的单选项目，如下图所示。

现在，我创建了一个数据项数组并使用.map 渲染组件，因为最多只有 3-4 个项目，现在我只想选择一个项目并在基础上更改颜色，如果我选择任何其他项目，它应该取消选择所有其他项目，但不选择当前单个选定的项目/组件。我试图这样做，但显然我可以选择所有这些。下面是代码：

const items = [
  {
    id: 1,
    iconName: 'male',
    title: 'Male',
    name: 'male',
  },
  {
    id: 2,
    iconName: 'female',
    title: 'Female',
    name: 'female',
  },
  {
    id: 3,
    iconName: 'transgender',
    title: 'Others',
    name: 'others',
  },
];

const Component = ({dispatch, iconName, title, name}) => {
  const [isSelected, setIsSelected] = useState(false);
  return (
    <TouchableOpacity
      activeOpacity={0.6}
      style={
        isSelected
          ? [styles.selectable, {backgroundColor: 'green'}]
          : [styles.selectable, {backgroundColor: COLORS.PINK}]
      }
      onPress={() => {
        setIsSelected(!isSelected);
      }}>
      <View style={styles.row}>
        <Ionicon name={iconName} size={36} color="#fff" />
        <Text>{title}</Text>
      </View>
    </TouchableOpacity>
  );
};

const Gender = () => {

  return (
    <View>
      <View>
        <Text>Your Gender</Text>
        <View>
          {items.map(item => (
            <Component
              key={item.id}
              title={item.title}
              iconName={item.iconName}
            />
          ))}
        </View>
      </View>
    </View>
  );
};

All though I could solve this by using separate states for each button, so whenever one is selected/pressed, the other states should become false.但是我必须在不使用我认为效率低下的.map 方法的情况下渲染单个组件。有人可以根据我目前解决此问题的方法提供任何解决方案吗？

谢谢！

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

考虑将 isSelected 移动到父组件，而不是存储布尔值，而是存储选定的项目 id。将 itemId、selectedId、setSelectedId（作为回调）传递给子组件并将样式检查更改为：

style={
        itemId === selectedId
          ? [styles.selectable, {backgroundColor: 'green'}]
          : [styles.selectable, {backgroundColor: COLORS.PINK}]
      }
      onPress={() => {
        setSelectedId(itemId);
      }}>

现在您可以摆脱跟踪是否在组件中选择了该项目，而只需在父级的上下文中担心它（应该如此）。


const Gender = () => {
  const [selectedId, setSelectedId] = useState(false);

  return (
    <View>
      <View>
        <Text>Your Gender</Text>
        <View>
          {items.map(item => (
            <Component
              key={item.id}
              itemId={item.id}
              selectedId={selectedId}
              setSelectedId={setSelectedId}
              title={item.title}
              iconName={item.iconName}
            />
          ))}
        </View>
      </View>
    </View>
  );
};

【讨论】：