如何让前 2 个框默认选中？

Question

我是反应原生新手。我已经创建了这些选择器。我对如何将默认选择设置为每个选择器中的前 2 项感到困惑。所以默认选择“主场”和“联赛”。有什么想法吗？

这是我的代码：

const SelectorBar: React.FC<Props> = ({
value,
labels,
onChangeValue,
style,
}) => {

<View style={[styles.root, style]}>
        {
            labels && labels.map((item, index) => {
                const isSelected = item === value;
                const backgroundColor = isSelected ? colors.GREY.primary : 'transparent';

                return (
                    <Pressable style={[styles.tab, { backgroundColor }]} key={index} onPress={() => { onChangeValue && onChangeValue(item); }}>
                        <CustomText>{item}</CustomText>
                    </Pressable>
                );
            })
        }
    </View>
);
};

Answer 1

You need to set the initial state for the value prop to include those default selections
import React, { useState } from 'react';
import { View, Pressable, StyleSheet } from 'react-native';
import CustomText from './CustomText'; // Import your CustomText component
import { colors } from './styles'; // Import your colors

interface Props {
  value: string[];
  labels: string[];
  onChangeValue?: (value: string[]) => void;
  style?: object;
}

const SelectorBar: React.FC<Props> = ({ value, labels, onChangeValue, style }) => {
  const handlePress = (item: string) => {
    const isSelected = value.includes(item);
    const newValue = isSelected ? value.filter(v => v !== item) : [...value, item];

    if (onChangeValue) {
      onChangeValue(newValue);
    }
  };

  return (
    <View style={[styles.root, style]}>
      {labels &&
        labels.map((item, index) => {
          const isSelected = value.includes(item);
          const backgroundColor = isSelected ? colors.GREY.primary : 'transparent';

          return (
            <Pressable
              style={[styles.tab, { backgroundColor }]}
              key={index}
              onPress={() => handlePress(item)}
            >
              <CustomText>{item}</CustomText>
            </Pressable>
          );
        })}
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  tab: {
    padding: 10,
    borderWidth: 1,
    borderColor: colors.GREY.primary,
  },
});

export default SelectorBar;
Use the SelectorBar component with default selections:
import React, { useState } from 'react';
import { View } from 'react-native';
import SelectorBar from './SelectorBar'; // Import your SelectorBar component

const App = () => {
  const [selectedValues, setSelectedValues] = useState(['Home Game', 'League']);

  return (
    <View>
      <SelectorBar
        value={selectedValues}
        labels={['Home Game', 'Away Game']}
        onChangeValue={setSelectedValues}
      />
      <SelectorBar
        value={selectedValues}
        labels={['League', 'Playoffs', 'Tourney', 'Exhibition']}
        onChangeValue={setSelectedValues}
      />
    </View>
  );
};

export default App;

    enter code here