在本机中访问动态表单值

Question

我创建一个依赖于一组项目的表单。例如，如果有5个对象数组，我将创建5个表单集（一个文本框，一个单选按钮和问题（标签））。我将显示来自数组和复选框的包含YES或NO以及普通文本输入的问题。如果问题的答案为YES（checkbox），请启用文本框并在其中键入数量，并在完成所有问题后希望获得所有表格值。

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  Text,
  Button,
  TextInput,
  ScrollView,
  TouchableOpacity,
  Image,
  FlatList,
  StyleSheet
} from 'react-native';
import { getSurveyDataDetails, getSurveyDetails } from '../../../../database';
import Spinner from 'react-native-loading-spinner-overlay';
import PTRView from 'react-native-pull-to-refresh';
import GenerateForm from 'react-native-form-builder';
import RadioButton from 'radio-button-react-native';

export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      designArray: [],
      package_array: [
        { packagename: 'Pack 1', amount: 50, id: 1 },
        { packagename: 'Pack 2', amount: 20, id: 2 },
        { packagename: 'Pack 3', amount: 40, id: 3 },
        { packagename: 'Pack 4', amount: 80, id: 4 }
      ],

      values: [],
      booleans: [],
      radioValues: []
    };
  }

  componentWillMount() {
    this.createUI();
  }

  changebool(i, event) {
    console.log(i, event);

    let radioVal = [...this.state.radioValues];
    radioVal[i] = event;
    this.setState({ radioValues: radioVal });
    console.log(this.state.radioValues);
  }

  handleChange(i, event) {
    console.log(event, i);
    let val = [...this.state.values];
    val[data.id] = event;
    this.setState({ values: val });
  }

  getvalues() {
    console.log(this.state.radioValues);
  }

  createUI() {
    let designArray = this.state.designArray;

    this.state.package_array.map((data, i) => {
      designArray.push(
        <View key={i}>
          <Text style={{ marginLeft: '4%', marginTop: '4%', fontWeight: 'bold' }}>
            {' '}
            {i + 1} ) Are your sure to buy this {data.packagename} ?
          </Text>

          <View style={{ marginLeft: '10%', flexDirection: 'row', marginTop: '6%' }}>
            <RadioButton
              currentValue={this.state.radioValues[i]}
              value={1}
              onPress={this.changebool.bind(this, i)}
            >
              <Text>Yes</Text>
            </RadioButton>

            <View style={{ marginLeft: 10 }}>
              <RadioButton
                currentValue={this.state.radioValues[i]}
                value={0}
                onPress={this.changebool.bind(this, i)}
              >
                <Text>No</Text>
              </RadioButton>
            </View>
          </View>

          <TextInput
            style={{
              marginLeft: '4%',
              height: 40,
              width: '90%',
              alignItems: 'center',
              marginTop: '10%',
              borderWidth: 1
            }}
            onChangeText={this.handleChange.bind(this, i)}
            value={this.state.values[data.id]}
            maxLength={50}
            disable={this.state.booleans[i]}
          />
        </View>
      );
    });

    this.setState({ designArray });
  }

  handleOnPress(value) {
    this.setState({ value: value });
  }

  render() {
    return (
      <ScrollView>
        {this.state.designArray.map((value, index) => {
          return value;
        })}

        <Button
          onPress={() => this.getvalues()}
          title="save"
          color="#841584"
          accessibilityLabel="Learn more about this purple button"
        />

        <View style={{ height: 100, width: '80%', alignItems: 'center', marginTop: '10%' }} />
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  valueText: {
    fontSize: 18,
    marginBottom: 50
  }
});