如何在本机反应中使用复选框选择带有列表视图的多个项目？答案

【问题标题】：How to select mulitple items with listview using checkbox in react native?如何在本机反应中使用复选框选择带有列表视图的多个项目？
【发布时间】：2017-09-13 00:51:10
【问题描述】：

我正在处理带有复选框的列表视图。我正在尝试选择多个项目，但我在结果中发现了一些内容，每次单击复选框时，结果都会替换我检查的第一个项目

这是我的情况：

    this.state = {
     ...
     checkedBoxCheck: false,
     selectedItems:[],
   };

    renderRow(rowData) {
        return (
            ...
           <CheckBox style={styles.checkboxed}
              checked={rowData.id === this.state.checkedBoxCheck}
              onPress={() => this.onItemSelect(rowData)}
            />
        );

onItemSelect(row){
    this.setState({
        selectedItems: [{row}],
        checkedBoxCheck: true,
    });
    let myitem = this.state.selectedItems.concat({row});
    console.log(myitem);
}

【问题讨论】：

标签： checkbox react-native react-native-listview

【解决方案1】：

您忘记在状态中写入之前的值 selectedItems：

this.setState((prevState) => ({
    selectedItems: [...prevState.selectedItems, row],
    checkedBoxCheck: true,
}));

并删除值（使用 lodash）：

this.setState((prevState) => ({
    selectedItems: _.without(prevState.selectedItems, row),
    checkedBoxCheck: !!_.without(prevState.selectedItems, row).length,
}));

【讨论】：

很抱歉，我的 selectedItems 未定义且 setState 不是函数。
checked={rowData.id === this.state.checkedBoxCheck} 是什么？您有数组处于状态，您无法通过这种方式进行比较。
[{row}] 它是 [ { row: row } ] 但我不明白你为什么要这样做
对不起，我认为这一行 --- checked={rowData.id === this.state.checkedBoxCheck} 导致了问题，为什么复选框没有显示我忘了删除它，跨度>
@kkumber gist.github.com/TemaKozyrev/40337a569ae397ab19b76453f1dfaf5c/…

【解决方案2】：

尝试使用表单生成器的选择字段。 https://github.com/bietkul/react-native-form-builder

【讨论】：