首頁猿問如何根據用戶從 Picker...

如何根據用戶從 Picker 中選擇否顯示 TextInputs 的數量并將 textinput

JavaScript

蝴蝶不菲 2022-12-08 15:42:39

我允許用戶從選擇器中選擇一個數字，而不是像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" />

查看完整描述

3 回答

梵蒂岡之花

TA貢獻1900條經驗獲得超5個贊

使用這個我希望它能解決你的問題。 如果您在遵循代碼方面需要任何幫助，請告訴我。

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>

);

}

反對回復 2022-12-08

慕桂英546537

TA貢獻1848條經驗獲得超10個贊

你可以這樣做：

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>

反對回復 2022-12-08

SMILET

TA貢獻1796條經驗獲得超4個贊

你可以像下面這樣，根據你的選擇器設置一個給定長度的數組，并顯示基于它的 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 (

<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>

);

}

反對回復 2022-12-08

3 回答
0 關注
141 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何根據用戶從 Picker 中選擇否顯示 TextInputs 的數量并將 textinput

如何根據用戶從 Picker 中選擇否顯示 TextInputs 的數量并將 textinput

3 回答

添加回答