我如何在更改本机反应时从文本输入更新字段

Question

我有来自 api 的数据，我想做的是更新下面的 item.qty textInput，以便每次更改数字时都会从 qty_total textInput 中减去值，所以假设 qty 中的值为 5，qty_total是 15 如果用户将数量从 5 更改为 10 总数将从 15 下降到 10 ，这是我到目前为止的代码

PS : 我不想在 api 上发布它，但我只想在 momemet 上看到它

  import React, { useEffect, useRef, useState } from 'react';
import { Dimensions } from 'react-native';
import { Platform } from 'react-native';
import { TouchableOpacity } from 'react-native';
import { View, Text, FlatList, TextInput, StyleSheet, Animated, KeyboardAvoidingView } from 'react-native';
import AxiosInstance from '../../../helper/axiosHelper';

export default function MainList({ prodData, setProdData }) {
    const [ selectedRow, setSelectedRow ] = useState([]);
    const [ tempData, setTempData ] = useState([]);

    const springanim = useRef(new Animated.Value(0)).current;
    const listanimation = useRef(new Animated.Value(0)).current;

    useEffect(() => {
        AxiosInstance.get('/getProdOrders?r_date=2021-07-24&r_force_xtra=0').then((res) => {
            setTempData(res.data);
            console.log(tempData);
        });
    }, []);

    
    const ProdElem = ({ item, index }) => {
        let bgColor = index % 2 === 0 ? '#363434' : '#5a5656';

        return (
            <View style={[ { ...styles.container, backgroundColor: bgColor } ]}>
                <TouchableOpacity onPress={() => handleSelectedRow(item)}>
                    <Text style={styles.productName} numberOfLines={1}>
                        {item.product_name}
                    </Text>
                </TouchableOpacity>
                <View style={styles.subContainer}>
                    <View style={styles.qty_readOnly}>
                        <Text style={styles.qty_readOnlyText}>{item.qty_last}</Text>
                    </View>
                    <TextInput
                        style={styles.qty}
                        keyboardType='numeric'
                        name='qty'>
                        {item.qty}
                    </TextInput>
                    <TextInput style={styles.qty} keyboardType='numeric'>
                        {item.qty_total}
                    </TextInput>
                    <View style={styles.qty_readOnly}>
                        <Text style={styles.qty_readOnlyText}>{item.qty_post_order}</Text>
                    </View>
                </View>
            </View>
        );
    };

    const renderItem = ({ item }) => {
        let sumPre = 0,
            sumExtra = 0,
            sumTotal = 0,
            sumAvailabe = 0;

        item.data.forEach((e) => {
            sumPre += e.qty_last;
            sumExtra += e.qty;
            sumTotal += e.qty_total;
            sumAvailabe += e.qty_post_order;
        });

        return (
            <View>
                <FlatList
                    listKey={(item, index) => 'D' + index.toString()}
                    data={item.data}
                    renderItem={ProdElem}
                    keyExtractor={(e) => e.product}
                />

                <View style={styles.categoryContainer}>
                    <Text style={styles.categoryName}>{item.title}</Text>
                    <View style={styles.totals}>
                        <Text style={styles.total_qty_readonly}>{sumPre}</Text>
                        <Text style={styles.total_qty}>{sumExtra}</Text>
                        <Text style={styles.total_qty}>{sumTotal}</Text>
                        <Text style={styles.total_qty_readonly}>{sumAvailabe}</Text>
                    </View>
                </View>
            </View>
        );
    };
    useEffect(
        () => {
            Animate(false);
        },
        [ springanim ]
    );

    return (
        <View>
            <Animated.View style={{ paddingBottom: listanimation }}>
                <FlatList data={prodData} listKey={'cat'} keyExtractor={(item) => item.id} renderItem={renderItem} />
            </Animated.View>
            <Animated.View
                style={{
                    position        : 'absolute',
                    fontSize        : 25,
                    backgroundColor : 'white',
                    width           : Dimensions.get('screen').width,
                    padding         : 20,
                    bottom          : springanim
                }}>
                <Text>
                    Name: {selectedRow.product_name} <Text style={{ color: '#a0a0a0' }}>/ {selectedRow.revision}</Text>
                </Text>
                <Text style={{ fontWeight: 'bold' }}>Kind: {selectedRow.kind}</Text>
                <Text style={{ fontWeight: 'bold' }}>PCS: {selectedRow.qty_total}</Text>
                <Text style={{ fontWeight: 'bold' }}>Available: {selectedRow.qty}</Text>
            </Animated.View>
        </View>
    );
}

Answer 1

textinput 的目的是让您使用它来显示数据的用户输入，而不需要只需在您需要显示数据的地方添加文本，例如在您的情况下 qty_total 会在您更改 qty 时自动更改，因此将其设为文本

查看 TextInput 文档。

假设只是为数量选择器添加额外的状态

这是从用户那里获取数量输入的逻辑，用户将提供所需数量 const [qty,setqty]=useState(0)

并在您的文本输入中输入用户输入的数量 广告

value={qty}
   onChangeText={(val)=>setqty(val)}

之后您可以通过文本显示总计 喜欢

<Text>{item.qty_total-qty}</Text>