反应本机 - 平面列表单选

Question

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

示例：我选择单元格1，然后将选择1号。如果我需要选择2号，1号和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>
)
}
}

Answer 1

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

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

我们在注释中讨论的第二个问题应该通过将索引参数传递给 incrementCount 函数来解决。

嗨，现在在方法 _incrementCount() 中，您必须传递索引并用索引递增每个计数，就像您在 的值中一样。所以你可以做到

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

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

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