Question

我已经设法使用自动完成功能来建立选择屏幕，基本上我想要做的就是选择一个项目，将该项目的数量更新为所需的数量，如果您想添加更多列表中的项目有一个用于创建新字段（自动填充+所需金额）的按钮，代码如下（但无法正常工作，我正在展示我认为应对此进行管理）

render() {
    const { query } = this.state;
    const itemData = this.state.items;
    let mapArray = this.state.amount.slice();
    return (
        <View>
            <View style={styles.autocompleteContainer}>
                {
                    mapArray.map((l, i) => (
                        <View style={{ width: '100%', flexDirection: "row", alignItems: 'center' }} key={i}>
                            <Autocomplete style={styles.barStyle} data={this.state.query.length > 0 ? (this.state.itemPress ? [] : this.filterData(this.state.query, itemData)) : []}
                                defaultValue={query}
                                placeholder="Digite um item"
                                onChangeText={text => this.setState({ query: text, itemPress: false })}
                                renderItem={item => (
                                    <TouchableOpacity onPress={() => this.setState({ query: item, itemPress: true })}>
                                        <Text>{item}</Text>
                                    </TouchableOpacity>
                                )} key={i}/>
                            <View>
                                <View style={styles.amount}>
                                    <TouchableOpacity style={{ marginLeft: 10 }} onPress={() => {
                                        var clonedAmountArray = this.state.amount.slice();
                                        clonedAmountArray[i] -= 1;
                                        this.setState({ amount: clonedAmountArray })
                                    }}>
                                        <View>
                                            <Icon style={{ alignSelf: 'center' }} name="ios-remove" />
                                        </View>
                                    </TouchableOpacity>
                                    <Text style={{ fontSize: 20, alignSelf: 'center', marginLeft: 5 }}>{this.state.amount[i]}</Text>
                                    <TouchableOpacity style={{ marginLeft: 5, marginRight: 10 }} onPress={() => {
                                        let clonedAmountArray = this.state.amount.slice();
                                        clonedAmountArray[i] += 1;
                                        this.setState({ amount: clonedAmountArray })
                                    }}>
                                        <View>
                                            <Icon style={{ alignSelf: 'center' }} name="ios-add" />
                                        </View>
                                    </TouchableOpacity>
                                </View>
                            </View>
                        </View>
                    ))}
                <TouchableOpacity onPress={() => {
                    var updatedAmountArray = this.state.amount.slice();
                    updatedAmountArray.push(0);
                    this.setState({ amount: updatedAmountArray, totalViews: this.state.totalViews + 1 })
                }} style={{ backgroundColor: 'grey', width: 30, height: 30, borderRadius: 5, alignSelf: 'center' }}>
                    <View>
                        <Icon style={{ alignSelf: 'center' }} name="ios-add" />
                    </View>
                </TouchableOpacity>
            </View>
        </View>
    )
}

这是它的样子：

我想要的是根据按下“ +”底部按钮的次数渲染多个字段（自动完成+数量选择器），我还需要保留所有项目和数量的记录。

我可能以很多方式做错了，我仍然在学习本机反应，并且做错了很多事情。如果您对更简单的方法有任何建议，我将不胜感激。

-编辑- 感谢@Mohammed Ashfaq，它可以处理新字段，但是在所有视图中，“自动完成”的值保持不变：

Answer 1

OnPress函数Add1用于创建更多字段（自动填充+金额选择）。

onPress={() => {
  let clonedAmountArray = this.state.amount.slice();
  clonedAmountArray.push(0);
  this.setState({ amount:clonedAmountArray , totalViews: clonedAmountArray.length}) 
}

Add2的OnPress函数可增加特定索引的数量值。

onPress={() => {
  let clonedAmountArray = this.state.amount.slice();
  clonedAmountArray[i] += 1; 
  this.setState({ amount : clonedAmountArray}) 
}

减号图标的OnPress功能可减少特定索引的金额值。

onPress={() => {
  var clonedAmountArray = this.state.amount.slice();
  clonedAmountArray[i] -= 1; 
  this.setState({ amount : clonedAmountArray}) 
}

如何使用in react native呈现多个视图？

1 个答案: