如何使用React Native动态创建可编辑复选框

时间:2019-03-21 13:08:30

标签: reactjs react-native checkbox redux checkboxlist

我已根据其余api返回的数据创建了一个复选框列表。现在,我需要使其可编辑(即),然后单击复选框,我必须将值存储在变量的JSON数组中。

我现有的代码:

componentWillMount() {
  axios
    .get("checkinOutOthers/" + this.props.navigation.state.params.regnum)
    .then(responseData => {
      var parsedValue = JSON.parse(responseData.data.items[0].other_parts);
      if (JSON.parse(responseData.data.items[0].other_parts).length != 0) {
        var parsedValue = JSON.parse(responseData.data.items[0].other_parts);
        for (
          var i = 0;
          i < JSON.parse(responseData.data.items[0].other_parts).length;
          i++
        ) {
          var checkedVal = false;
          if (parsedValue[i].value === "Y") {
            checkedVal = true;
          } else {
            checkedVal = false;
          }

          checkBoxComponentList.push(
            <CheckBoxComponent
              title={parsedValue[i].groupitem}
              checked={checkedVal}
              onPress={this.press.bind(this)}
            />
          );

          //sellablePartsCategory.push({name:parsedValue[i].groupitem},{value:checkedVal});
        }
        this.setState({ visible: true });
      }
    })
    .catch(err => {
      console.log(err);
    });
}

CheckboxComponent js代码:

import React, { Component } from "react";
import { TextInput, StyleSheet, View, Text } from "react-native";
import { CheckBox, ListItem, List } from "react-native-elements";
import customStyles from "./../css/style";

const CheckBoxComponent = ({ title, checked, onPress }) => {
  return (
    <View style={customStyles.menuItem}>
      <CheckBox checked={checked} onPress={onPress} />

      <Text>{title}</Text>
    </View>
  );
};

export default CheckBoxComponent;

我该如何实现?

0 个答案:

没有答案