0

我允许用户从选择器中选择一个数字，它可以随机选择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>
            )}
4

3 回答 3

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>
    );
  }
}
于 2020-07-27T08:01:41.510 回答
0

你可以这样做：

    this.state = { values: [] };
    const textInputs = [];
    for(let i=0; i< this.state.noOfStores; i++) {
          textInputs.push(
                <TextInput
                      style ={[styles.input,{ backgroundColor: theme.colors.lightGray }]}
                      placeholder=" Name "
                      keyboardType={'default'}
                      placeholderTextColor="gray"
                      onChangeText={text => this.onChangeText(text,i)}
                 />
           )
           this.setState({ values: [...this.state.values, ''] });
    }
    onChangeText = (text,index) => {
           const values = [...this.state.values];
           values[index] = text;
           this.setState({ values });
    }

然后在渲染方法中：

<View>
     {textInputs}
</View>
于 2020-07-27T07:41:44.547 回答
0

你可以像下面这样，根据你的选择器设置一个给定长度的数组，并基于它显示 UI。

setRows 设置行数，您可以轻松更新数组。

从您的选择器中调用 setRows。

export default function App() {
  const [textArr, setTextArr] = useState([]);
  
  const onChangeText = (text, index) => {
    const arr = [...textArr];
    arr[index] = text;
    setTextArr(arr);
  };

  const  setRows=(rowCount)=>{
   setTextArr(Array(rowCount).fill('Default text'))
  };

  return (
    <View style={{ paddingTop: 100 }}>
      <Button
        title="set"
        onPress={()=>setRows(6)}
      />
      {textArr.map((item, index) => (
        <TextInput
          style={[styles.input, { backgroundColor: 'grey' }]}
          placeholder=" Name "
          keyboardType={'default'}
          placeholderTextColor="gray"
          value={item}
          onChangeText={(text)=>onChangeText(text,index)}
        />
      ))}
    </View>
  );
}
于 2020-07-27T08:02:01.627 回答