gpt4 book ai didi

javascript - 将数据从 React Native 中的数组绑定(bind)到 TextInput

转载 作者:行者123 更新时间:2023-12-01 00:02:10 26 4
gpt4 key购买 nike

我有一个数据数组。喜欢

product = [
{
name: 'item 1',
quantity: 10,
},
{
name: 'item 2',
quantity: 12,
},
{
name: 'item 3',
quantity: 14,
},
]

我想在 TextInput 中显示此数量字段。

那么我该如何做到这一点并管理 onChangeText 事件呢?

最佳答案

检查这个完整的示例。

import React, { Component } from "react";
import { View, TextInput } from "react-native";

export default class Example extends Component {
state = {
product: [
{
name: "item 1",
quantity: 10
},
{
name: "item 2",
quantity: 12
},
{
name: "item 3",
quantity: 14
}
]
};

onChangeText = ( item, text ) => {
let updateProducts = [...this.state.product]
let index = this.state.product.findIndex(obj => obj.name == item.name)
updateProducts[index].quantity = text;
this.setState({
product: updateProducts
})
}

render() {
return (
<View>
{this.state.product.map(item => (
<TextInput
style={{ height: 40, borderWidth: 1, margin: 5, width: "80%", padding: 5 }}
onChangeText={(text) => this.onChangeText(item, text)}
value={item.quantity}
/>
))}
</View>
);
}
}

希望这对您有帮助。如有疑问,请放心。

关于javascript - 将数据从 React Native 中的数组绑定(bind)到 TextInput,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60649822/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com