如何在JavaScript映射函数中的React Native中使用Check Box？

Question

我正在创建一个React Native App，其中我在javascript映射函数中使用Checkbox。因此，当我选中一个复选框时，它也会同时选中所有其他复选框。如何能够分别检查复选框，我也可以从地图功能列表中多次检查复选框。

以下是一些参考的代码：

<Card noShadow style={styles.card}>
                    <CardItem header bordered>
                        <Text style={styles.header}>{string.color}</Text>
                    </CardItem>
                    {this.state.details.map((data, i) => {
                        return (
                            <List key={i}>
                                <CardItem>
                                    <CheckBox style={styles.checkbox}
                                        checked={this.state.checkedDefault} onPress={() => this.setState({ checkedDefault: !this.state.checkedDefault })} />
                                    <Text note style={styles.textWrap}>{data.name}</Text>
                                </CardItem>
                            </List>
                        )
                    })}
                </Card>

Answer 1

您需要为此使用对象，如下更改渲染方法

<Card noShadow style={styles.card}>
    <CardItem header bordered>
        <Text style={styles.header}>{string.color}</Text>
    </CardItem>
    {this.state.details.map((data, i) => {
        return (
            <List key={i}>
                <CardItem>
                    <CheckBox style={styles.checkbox}
                        checked={!!this.state.checkedDefault[i]}
                        onPress={
                            () => this.setState(state => {
                                const checkedDefault = {...state.checkedDefault};
                                checkedDefault[i] = !checkedDefault[i];
                                return { checkedDefault }
                            })
                        } />
                    <Text note style={styles.textWrap}>{data.name}</Text>
                </CardItem>
            </List>
        )
    })}
</Card>

不要忘记为checkedDefault的状态分配初始值，如下所示

state = {
   //other values
   checkedDefault: {}
}

如果id数组中的项目上存在details而不是i，则可以使用var tr = '<tr class="v-middle">'; tr += '<td><span><i class=\'.icon_code.\'_icons></i></span></td>'; tr += '<td class="flex text-color">'+icon_name+'</td>'; tr += '<td class="text-color">'+icon_code+'</td>'; tr += '<td class="text-color">'+icon_code_css+'</td>'; tr += '<td><span class="text-color">Material Design</span></td>'; tr += '<td><span class="badge bg-primary-lt">Copy</span> <span class="badge bg-primary-lt">Copy script</span></td>'; tr += "</tr>"; 属性来分配对象中的值