我一直在寻找如何在 Flatlist 中进行 单选的方法, 但找不到任何方法,在我的代码中,我试图在 Flatlist中的 每个单元格上进行 单选 。
示例: 我选择1号单元格,那么将选择1号单元格。如果需要选择2号,将同时选择1号和2号。
我的代码中发生的事情是当我选择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> ) } }
的TextInputs目标状态相同,SplOrder因此,如果您在其他任何状态下进行更改,则它们TextInput将显示相同的状态。我看到的解决方案是为您创建的每个项目放置一个状态。你应该做这个:
TextInputs
SplOrder
TextInput
<TextInput placeholder = "Insert Special Request" onChangeText = { (text) => this.setState({ ['SplOrder'+index]: text }) } value = { this.state['SplOrder'+index] } />
我们在注释中讨论的第二个问题应该通过将index参数传递给增量计数函数来解决。
嗨,现在,在_incrementCount()方法中,您将必须传递索引并像其值一样使用索引增加每个计数。所以你可以做
<TouchableOpacity onPress = {() => this._incrementCount(index)}> <Text> + </Text> </TouchableOpacity>
然后更改您的_incrementCount方法,添加一个参数并执行以下操作:
_incrementCount(index) { this.setState({ ['count'+index]: this.state['count'+index] + 1 }); }