Question

如何在react native <CheckBox></CheckBox>中选中多个复选框？

当前我的复选框是这样的：

if(this.state.specialise_list != null){
  return this.state.specialise_list.map((data, i)=>(
    <View key={i} style={{ flexDirection: 'row' }}>
      <CheckBox
        containerStyle={{ borderColor: 'transparent' }}
        value={this.state.specialise}
        onValueChange={(itemValue, itemKey) => this.setState({ specialise: itemValue })} />
      <Text style={{marginTop: 5}}> { data.name }</Text>
    </View>
  ))
}

我上面的代码将选中所有复选框。我正在尝试以selected_specialise: [ '1', '2', '5', '24' ];格式将选中的复选框插入数组，如果未选中特定的复选框，将从数组中删除数据。

Answer 1

您只需要检查selected_specialise数组是否包含索引即可。

if(this.state.specialise_list != null){
  return this.state.specialise_list.map((data, i)=>(
    <View key={i} style={{ flexDirection: 'row' }}>
      <CheckBox
        containerStyle={{ borderColor: 'transparent' }}
        value={this.state.selected_specialise.includes(i)}
        onValueChange={(itemValue, itemKey) => this.setState({ specialise: itemValue })} />
      <Text style={{marginTop: 5}}> { data.name }</Text>
    </View>
  ))
}

如果您将第一个设为1，则..includes(i + 1)

React Native中的多个复选框

1 个答案: