如何将数组放入复选框并根据数组ID单击它

时间:2019-05-22 06:23:21

标签: android ios react-native

我是React Native的新手,想问一下以及如何解决它。.当我单击1复选框时,也选中了所有值复选框,那么我的问题是如何根据数组的值将其分开?

这是我的屏幕截图=>

enter image description here

感谢进阶...

这是我的代码=>

render () {
const { data } = this.props
const { checked, statusChecked, unhide } = this.state

const checkBoxCourier = data.map((item, index) => {
  return (
    <Card key={index} style={globalStyle.padDefault}>
      <Item>
        <Text>
          {'[LOGO] '}
        </Text>
        <Text style={styles.bold}>{item.courier_name.toUpperCase()}</Text>
      </Item>
      {
        item.services.map((item2, index) => (
          <ListItem
            key={index}
          >
            <CheckBox
              checked={checked}
              onPress={() => this.onCheckBoxPress(item2.courier_service_id, item2.status)}
            />
            <View style={styles.row}>
              <Body>
                <Text style={styles.textStyle}>{item2.service_name}</Text>
                <Text style={styles.textStyle}>{item2.service_description}</Text>
              </Body>
            </View>
          </ListItem>
        ))
      }
    </Card>
  )
})

return (
  <Container>
    <ScrollView>
      {checkBoxCourier}
    </ScrollView>
  </Container>
)

2 个答案:

答案 0 :(得分:1)

通过这种方式

<PlanningCalendarRow title="{zearnModel&gt;PRODUCT_NAME_SHORT}"
                            appointments="{path: 'zearnModel&gt;/zearn_por_applications', 
                                           sorter: [{ path: 'APPLICATION_ID', descending: false}], 
                                           parameters : {$expand : 'EventItem'}, 
                                           events : {dataReceived : '.onDataEvents' }, templateShareable:true}"
                            text="{zearnModel&gt;PRODUCT_NAME_CAPTION}" icon="" selected="false">
                            <appointments>
                                <unified:CalendarAppointment title="{EVENT_DESC}" text="{EVENTTYPE_DESC}" icon="sap-icon://family-care"
                                    startDate="{path: 'STARTDATE', formatter: 'ARN.ARN.controller.Formatter.PORType1'}"
                                    endDate="{path: 'ENDDATE', formatter: 'ARN.ARN.controller.Formatter.PORType1'}"
                                    type="{path: 'EVENTTYPE_DESC', formatter: 'ARN.ARN.controller.Formatter.PORType'}" selected="false" tentative="false"/>
                            </appointments>
                        </PlanningCalendarRow>

和onCheckBoxPress

checked={index+item2.courier_service_id == this.state.Selected ? checked :uncheck}
          onPress={() => this.onCheckBoxPress(item2,index)}
        />

希望这对您有帮助

答案 1 :(得分:0)

您需要将标志传递给特定于服务项目而非组件的复选框,如下所示:

render(){
    const {data} = this.props
    const {checked, statusChecked, unhide} = this.state

    const checkBoxCourier = data.map((item, index) => {
        return (
            <Card key={index} style={globalStyle.padDefault}>
                <Item>
                    <Text>
                        {'[LOGO] '}
                    </Text>
                    <Text style={styles.bold}>{item.courier_name.toUpperCase()}</Text>
                </Item>
                {
                    item.services.map((item2, index) => (
                        <ListItem
                            key={index}
                        >
                            <CheckBox
                                checked={item2.isChecked} // Save the value here
                                onPress={() => this.onCheckBoxPress(item2.courier_service_id, item2.status)}
                            />
                            <View style={styles.row}>
                                <Body>
                                <Text style={styles.textStyle}>{item2.service_name}</Text>
                                <Text style={styles.textStyle}>{item2.service_description}</Text>
                                </Body>
                            </View>
                        </ListItem>
                    ))
                }
            </Card>
        )
    })