javascript - 如何根据用户从 Picker 中选择不显示 TextInputs 并将 textinput 的值存储在数组中

Question

我允许用户从选择器中选择一个数字，它可以随机选择1、4、6 。当他选择像 3 这样的数字时，将显示 3 个 TextInputs，他将在 3 个输入字段中输入一些内容，我想将这些值保存到一个数组中。怎么能做到这一点，react native 我认为我使用了一种不好的方法，我想要一个可以使我的代码高效并告诉我如何将值存储到数组中的专家。问候

{this.state.noOfStores === 1 && (
              <TextInput
                style={[
                  styles.input,
                  {
                    backgroundColor: theme.colors.lightGray,
                  },
                ]}
                placeholder=" Name "
                keyboardType={'default'}
                placeholderTextColor="gray"
              />
            )}

            {this.state.noOfStores === 2 && (
              <View>
                <TextInput
                  style={[
                    styles.input,
                    {
                      backgroundColor: theme.colors.lightGray,
                    },
                  ]}
                  placeholder=" Name "
                  keyboardType={'default'}
                  placeholderTextColor="gray"
                />
                <TextInput
                  style={[
                    styles.input,
                    {
                      backgroundColor: theme.colors.lightGray,
                    },
                  ]}
                  placeholder=" Name "
                  keyboardType={'default'}
                  placeholderTextColor="gray"
                />
              </View>
            )}
            {this.state.noOfStores === 3 && (
              <View>
                <TextInput
                  style={[
                    styles.input,
                    {
                      backgroundColor: theme.colors.lightGray,
                    },
                  ]}
                  placeholder=" Name "
                  keyboardType={'default'}
                  placeholderTextColor="gray"
                />
                <TextInput
                  style={[
                    styles.input,
                    {
                      backgroundColor: theme.colors.lightGray,
                    },
                  ]}
                  placeholder=" Name "
                  keyboardType={'default'}
                  placeholderTextColor="gray"
                />
                <TextInput
                  style={[
                    styles.input,
                    {
                      backgroundColor: theme.colors.lightGray,
                    },
                  ]}
                  placeholder=" Name "
                  keyboardType={'default'}
                  placeholderTextColor="gray"
                />
              </View>
            )}
            {this.state.noOfStores === 4 && (
              <View>
                <TextInput
                  style={[
                    styles.input,
                    {
                      backgroundColor: theme.colors.lightGray,
                    },
                  ]}
                  placeholder=" Name "
                  keyboardType={'default'}
                  placeholderTextColor="gray"
                />
                <TextInput
                  style={[
                    styles.input,
                    {
                      backgroundColor: theme.colors.lightGray,
                    },
                  ]}
                  placeholder=" Name "
                  keyboardType={'default'}
                  placeholderTextColor="gray"
                />
                <TextInput
                  style={[
                    styles.input,
                    {
                      backgroundColor: theme.colors.lightGray,
                    },
                  ]}
                  placeholder=" Name "
                  keyboardType={'default'}
                  placeholderTextColor="gray"
                />
                <TextInput
                  style={[
                    styles.input,
                    {
                      backgroundColor: theme.colors.lightGray,
                    },
                  ]}
                  placeholder=" Name "
                  keyboardType={'default'}
                  placeholderTextColor="gray"
                />
              </View>
            )}

标签： javascriptarraysreact-nativereact-native-textinput

Answer 1

使用这个我希望它能解决你的问题。 如果您在以下代码方面需要任何帮助，请告诉我。

import React, {Component} from 'react';
import {View, TouchableOpacity, Text, TextInput} from 'react-native';
export class AddInputs extends Component {
  state = {
    textInput: [],
    inputData: [],
  };

  //function to add TextInput dynamically
  addTextInput = index => {
    let textInput = this.state.textInput;
    textInput.push(
      <TextInput
        style={{
          height: 40,
          width: '100%',
          borderColor: '#2B90D8',
          borderBottomWidth: 3,
        }}
        placeholder={'Add Text'}
        onChangeText={text => this.addValues(text, index)}
      />,
    );
    this.setState({textInput});
  };

  //function to add text from TextInputs into single array
  addValues = (text, index) => {
    let dataArray = this.state.inputData;
    let checkBool = false;
    if (dataArray.length !== 0) {
      dataArray.forEach(value => {
        if (value.index === index) {
          value.text = text;
          checkBool = true;
        }
      });
    }
    if (checkBool) {
      this.setState({
        inputData: dataArray,
      });
    } else {
      dataArray.push({text: text, index: index});
      this.setState({
        inputData: dataArray,
      });
    }
  };

  render() {
    return (
      <View
        style={{
          flex: 1,
        }}>
        <View
          style={{
            width: '100%',
            alignItems: 'center',
          }}>
          {this.state.textInput.map(value => {
            return value;
          })}
        </View>

        <TouchableOpacity
          onPress={() => {
            this.addTextInput(
              'your desired number of inputs here like 5, 20 etc',
            );
          }}>
          <Text>Add Inputs</Text>
        </TouchableOpacity>
      </View>
    );
  }
}