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

Question

我有一个数据数组。喜欢

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

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

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

Answer 1

检查这个完整的示例。

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

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