Javascript React Native-Flatlist单选

我一直在搜索如何在平面列表中进行单个选择，但我找不到任何选择，在我的代码中，我正在尝试对我的平面列表中的每个单元格进行单个选择

示例：我选择1号单元格，然后选择1号单元格。如果需要选择no.2，则会同时选择no.1和no.2

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

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

导出默认类组件{
建造师（道具）{
超级（道具）
此.state={
数据：[]，
id:[]，
价格：【】，
计数：0，
命令：“”，
tbl:this.props.navigation.state.params.tbl，
orderDet:this.props.navigation.state.params.orderDet，
DineIn:this.props.navigation.state.params.DineIn，
抽头：this.props.navigation.state.params.TakeOut，
}
}
/********************编辑*************************
_递增计数（）{
this.setState（{count:this.state.count+1}）；
}
_递减计数（）{
this.setState（{count:this.state.count-1}）；
}
changeTextHandler（）{
this.setState（{['count'+index]：text}）；
};
*/
_renderItem=（{item，index}）=>{
返回(
名称：{item.menu_desc}
价格：{item.menu_Price}
状态：{item.menu_Status}
this.setState（{SplOrder:text}）
值={this.state.SplOrder}
/>
这是.\u incrementCount（）}>
+ 
这个。_decreaseCount（）}>
- 
)
}
render（）{
返回(
表号：{this.state.tbl}
订单号：{this.state.orderDet}
{this.state.DineIn}{this.state.TakeOut}
index.toString（）}
extraData={this.state}
renderItem={this.\u renderItem}
/>
this.submit（）}>
下单
)
}
}

文本输入的目标是相同的状态

SplOrder

，因此，如果您在任何

TextInput

中更改它，其他输入将显示相同的状态。我看到的解决方案是为您创建的每个项目设置一个状态。 您应该这样做：

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

---

这适用于一个文本输入，但不适用于我的其他文本输入。我会更新我的代码。让我看看你有什么！不管怎么说，我想，只要按照我给你的建议去做就行了。我已经更新了我的代码，先生，你会在评论中看到它们的。是的，我按照你之前说的做了，但是你看，我的第二个文本输入和第一个有点不同。（我指的是有+和-）我照你说的做了，但没有用，先生，我还尝试在我的值中加入“value={this.state['count'+index].toString（）}”，因为如果没有“.toString（）”，我得到的警告是预期的字符串。你觉得我的changeTextHandler怎么样？TextInput的onChangeText属性是错误的。它应该像。。。onChangeText={（文本）=>this.changeTextHandler（文本）}。。。

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

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