javascript - 如何在 FlatList 中的项目之间切换？

Question

我向每个平面列表项目添加了一个自定义单选按钮。因此，每个项目行的左侧都有一个单选按钮，我希望能够根据行项目在单选按钮的选定值之间进行切换。因此，我可以选择第一行项目并将其选择/切换为打开状态，或者选择第二个项目并将其切换为打开状态并将第一行项目切换为关闭状态。

我对如何使用当前对象设置逻辑有点困惑。我当前的对象有一个 id 和 isSelected bool。 bool 值将指示该行是否被选中(即是否被选中)。

这是我到目前为止所拥有的:

这是我渲染平面列表 fooItems 的组件。 fooItems 本身是组成列表的各个元素。

export class FooItemsComponent extends Component {

    constructor(props) {
        super(props);
    }

    async componentDidMount() {
        //some reducer action 
      }

    renderItem = item => {
         if (item.load) {
          return <ActivityIndicator color={Colors.activityColor} size="small" />;
        } else {

          return (
              <View>
                <FooItem
                    {...item}
                    navigation={this.props.navigation}
                    showParticularItems={true}
                />
                </View>
          ); }
      };

    render() {
        const { fooItems, navigation, loading, props} = this.props;
        if (!fooItems) fooItems = [];

        return (
            <View style={styles.container}>
                <FlatList
                keyExtractor={(item, index) => `key-${index}`}
                data={fooItems}
                renderItem={item => this.renderItem(fooItems.item)}
                ItemSeparatorComponent={Separator}
                ListHeaderComponent={Header}
                ListFooterComponent={loading ? LoadingFooter : Separator}
                />
          </View>

        );
    }
} 

FooItem 组件:

export default class FooItem extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isSelected: this.props.fooItems.isSelected

    };
  }

  changeSelected = isSelected => {

    if(!isSelected) {
      let selected = this.props.fooItems; 
        selected = selected.isSelected = true; 

        this.setState({ isSelected: selected});
      }
  }; 

  render() {
    const {
      Details,
      showPreferred = false,
      showSetSelected = false, 
      navigation
    } = this.props;

    const { isSelected} = this.state; 

    return (
      <View
        style={[ showSetSelected? styles.setDefaultContainer : 
          styles.container,
          showBorder ? { borderBottomWidth: 1, borderTopWidth: 1 } : {},
        ]}
      >
        {showSetSelected && (
            <View> 
              <TouchableOpacity
                style={[styles.info, !isSelected ? styles.lineBreak : {}]}
                onPress={() => this.changeSelected(isSelected)}
              >
               <RadioButton isChecked={isSelected}></CheckedCircle>
              </TouchableOpacity>
          </View>
        )}
      </View>
    );
  }
}

我的自定义控件:

const RadioButton = ({ isChecked  }) => {
    let checkedStatus;
    switch (isChecked) {
      case true:
        checkedStatus = <Image style={styles.container} source={require('../../../assets/radioButton.png')} />
        break
      default:
        checkedStatus = <Image style={styles.container} source={require('../../../assets/circle.png')} />
        break
    }
    return <View style={styles.container}>{checkedStatus}</View>
  }

现在，我注意到尚未选择的另一行并选择了它，该特定行的单选按钮状态已被选中，但现在我有两个已选中/选定的行，而不是一个。所以我想知道如何切换另一行。我怎样才能完成这件事？

编辑:

列表中单选按钮切换的示例，我只想在列表行之间列出的单选按钮之间进行切换。

Answer 1

在 FooItemsComponent 中维护一个状态变量，例如 selectedIndex 或一些唯一的 id，并将此索引/id 传递给每个 FooItem 并与此 selectedIndex 进行比较

<RadioButton
  isChecked={item.id === this.props.selectedIndex}
/>

在 FooItemsComponent 级别维护一个方法，该方法控制检查哪个项目，如下所示

changeSelected = index => {
    this.setState({
      selectedIndex: index,
    });
};

并将其传递给每个 FooItem

<FooItem
  {...item}
  ...
  selectedIndex={this.state.selectedIndex}
  changeSelected={this.changeSelected}
/>

最后在 FooItem 中将其放在 Touchable 上并传递 FooItem 的 id 或索引。

<TouchableOpacity onPress={() => this.props.changeSelected(item.id)}>

这是一个博览会link粗略的想法。(请忽略样式并使其真正成为您的!)