Question

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

我对如何为当前对象设置逻辑感到困惑。我当前的对象有一个ID和isSelected布尔值。布尔值将指示该行是否为isSelected（即已选中）。

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

这是呈现扁平表fooItem的组件。 fooItems本身是组成列表的各个元素。

.DayPicker-Months {
  flex-direction: row;
  flex-wrap: nowrap;
}

FooItem组件：

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>

        );
    }
}

我的自定义控件：

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>
    );
  }
}

现在，我注意到尚未选中的另一行，然后选择了它，选中了该特定行的单选按钮状态，但是现在我有两个选中/选定的行，而不是一个。所以我想知道如何切换另一行。我该怎么做？

编辑：

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

Answer 1

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

<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博览会，用于粗略想法。（请忽略样式，使其真正成为您的样式！）

Answer 2

您需要跟踪在FooItem状态下选择了哪个FooItemsComponent。然后使用来检查

<FooItem
     {...item}
     isSelected={this.state.selectedItem.id === item.id}
     navigation={this.props.navigation}
     showParticularItems={true}
   />

以这种方式。

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

2 个答案: