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