我正在尝试使用useRef更改从动态json列表中按下的按钮的颜色。但是当我使用useRef时，它只针对列表的最后一个值。但是如果我在列表中添加数组，那么主组件如何知道按下了哪个元素？

需要将选中项目的背景设为彩色，其余部分设为白色

父元素==

const Usage = () => {
  const data = UsageDataMock;
  const invoiceTitleRef = useRef("");

  const onChange = () => {
    console.log(
      "Selected Title => ",
      invoiceTitleRef?.current?.getSelectedTitle()
    );
  };

  return (
    <View style={{ flexDirection: "row", marginTop: 50 }}>
      {data.map((item, index) => (
        <InvoiceTitle
          ref={invoiceTitleRef}
          key={item.id}
          title={item.title}
          onChange={onChange}
        />
      ))}
    </View>
  );
};

子组件

const InvoiceTitle = forwardRef(
  ({ title, onChange, ...props }: InvoiceTitleProps, ref) => {
    const [selectedTitle, setSelectedTitle] = useState("");

    useImperativeHandle(ref, () => ({
      getSelectedTitle: () => selectedTitle,
    }));
    const onClick = (title: string) => {
      onChange(selectedTitle);
    };
    console.log("default title", selectedTitle);

    return (
      <Pressable
        onPress={() => onChange(setSelectedTitle(title))}
        style={({ pressed }) => [
          styles.titleContainer,
          { backgroundColor: "red", opacity: pressed ? 0.5 : 1 },
        ]}
      >
        <AppText>{title}</AppText>
      </Pressable>
    );
  }
);

11月28日更新

获得选定的项目，但现在它正在改变每个按钮的颜色。

const Usage = () => {
  const [data, setData] = useState(UsageDataMock1);
  const invoiceTitleRef = [];

  const onChange = (index, selectedTitle) => {
    // console.log('Selected Title => ', invoiceTitleRef[index].getSelectedTitle())
    const tempSelection = invoiceTitleRef[index].getSelectedTitle();
    const temp = data.map((item, index) => {
      if (item.title == tempSelection) {
        return { ...item, isSelected: "true" };
      } else return { ...item, isSelected: "false" };
    });

    setData(temp);
  };
  console.log("123", data);

  return (
    <AppBackground>
      <View style={{ flexDirection: "row", marginTop: 50 }}>
        {data.map((item, index) => (
          <>
            {console.log("asd", item)}
            <InvoiceTitle
              ref={(element) => (invoiceTitleRef[index] = element)}
              key={item.id}
              title={item.title}
              selected={item?.isSelected}
              onChange={onChange}
              index={index}
            />
          </>
        ))}
      </View>
    </AppBackground>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    marginTop: 40,
  },
  titleContainer: {
    marginHorizontal: 10,
    alignSelf: "flex-start",
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderRadius: 12,
  },
});

export default Usage;

子组件

const InvoiceTitle = forwardRef(
  (
    {
      title,
      onChange,
      index,
      key,
      selected = false,
      ...props
    }: InvoiceTitleProps,
    ref
  ) => {
    useImperativeHandle(ref, () => ({
      getSelectedTitle: () => title,
    }));

    // console.log('ASD title', title, selected)
    // const [color, setColor] = useState('white')

    const [color, setColor] = useState("white");

    const onClick = () => {
      onChange(index, title);
    };

    return (
      <Pressable
        key={key}
        onPress={() => onClick()}
        style={({ pressed }) => [
          styles.titleContainer,
          {
            backgroundColor: selected ? "red" : "blue",
            opacity: pressed ? 0.5 : 1,
          },
        ]}
      >
        <AppText>{title}</AppText>
      </Pressable>
    );
  }
);

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    marginTop: 40,
  },
  titleContainer: {
    marginHorizontal: 10,
    alignSelf: "flex-start",
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderRadius: 12,
  },
});

export default InvoiceTitle;

interface InvoiceTitleProps {
  title: string;
  onChange: Function;
  index: number;
  selected: boolean;
  key?: number;
}