React Native-Flatlist单选 [英] React Native - Flatlist Single Select

问题描述

我一直在寻找如何在 Flatlist 中进行单选的方法，但是找不到任何方法，在我的代码中，我试图对每个单元格进行单选.在我的单位列表中.

I've been searching around how to make a single select in Flatlist but I can't find any, here in my code I'am trying to make a single select on every cells that is inside my Flatlist.

示例:我选择1号单元格，那么将选择1号单元格.如果我需要选择2号，那么1号和2号都将被选中.

Example: I select cell no.1, then no.1 will be selected. And if I need to select no.2, both no.1 and no.2 will be selected.

代码中发生的事情是当我选择1号时，它将选择所有单元格.

What is happening in my code is when I select no.1, it would select all cells.

export default class Dishes extends Component {
    constructor(props) {
        super (props)
        this.state = {
            data: [],
            id: [],
            price: [],
            count: 0,
            SplOrder: '',
            tbl: this.props.navigation.state.params.tbl,
            orderDet: this.props.navigation.state.params.orderDet,
            DineIn: this.props.navigation.state.params.DineIn,
            TakeOut: this.props.navigation.state.params.TakeOut,
        }
    }

/********************EDIT*************************
_incrementCount() {
    this.setState({ count: this.state.count + 1 });
}
_decreaseCount() {
    this.setState({ count: this.state.count - 1 });
}
changeTextHandler() {
    this.setState({ ['count'+index]: text });
};
*/

    _renderItem = ({ item, index }) => {
        return (
            <View>
                <View>
                    <View>
                        <Text>Name: { item.menu_desc }</Text>
                            <View}>
                                <Text>Price: ₱{ item.menu_price }</Text>
                                <Text>Status: { item.menu_status }</Text>
                            </View>
                        <TextInput
                            placeholder = "Insert Special Request"
                            onChangeText = { (text) => this.setState({ SplOrder: text }) }
                            value = { this.state.SplOrder }
                        />
                    </View>
                    <View>
                        <TouchableOpacity
                            onPress = {() => this._incrementCount()}>
                            <Text> + </Text>
                        </TouchableOpacity>
                        <TextInput
                            onChangeText={this.changeTextHandler}
                            value={this.state['count'+index].toString()}    // Not working
                            placeholder="0"/>
                        <TouchableOpacity
                            onPress = {() => this._decreaseCount()}>
                            <Text> - </Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        )
    }

    render() {
        return (
            <View>
                <View>
                    <Text>Table No: { this.state.tbl }</Text>
                    <Text>Order No: { this.state.orderDet }</Text>
                    <Text>{ this.state.DineIn }{ this.state.TakeOut }</Text>
                </View>

                <FlatList
                data = {this.state.data}
                keyExtractor={(item, index) => index.toString()}
                extraData={this.state}
                renderItem = {this._renderItem}
                />
                <View>
                    <TouchableOpacity
                    onPress = {() => this.submit()}>
                        <Text>Send Order</Text>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}

推荐答案

TextInputs的目标状态为SplOrder，因此，如果在任何TextInput中进行更改，其他状态将显示相同.我看到的解决方案是为您创建的每个项目放置一个状态. 您应该这样做:

The TextInputs are targeting the same state SplOrder so, if you change it in any TextInput the others will display the same. The solution I see is to put an state for each item you create. You should do this:

                    <TextInput
                        placeholder = "Insert Special Request"
                        onChangeText = { (text) => this.setState({ ['SplOrder'+index]: text }) }
                        value = { this.state['SplOrder'+index] }
                    />

我们在注释中讨论的第二个问题应该通过将index参数传递给增量计数函数来解决.

The second problem we have discussed in the comments should be fixed by passing index parameter to incrementCount function.

您好，现在，在_incrementCount()方法中，您将必须传递索引并像其值一样使用索引增加每个计数.所以你可以做

Hi, now in the method _incrementCount() you will have to pass the index and increment each count with it index as you have in the value of. So you could do

<TouchableOpacity
    onPress = {() => this._incrementCount(index)}>
    <Text> + </Text>
</TouchableOpacity>

然后更改您的_incrementCount方法，添加一个参数并执行以下操作:

And then change your _incrementCount method adding a parameter and doing like this:

_incrementCount(index) {
    this.setState({ ['count'+index]: this.state['count'+index] + 1 });
}

这篇关于React Native-Flatlist单选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！