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

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

我有来自 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>
    );
}

解决方法

textinput 的目的是获取用户输入，您将其用于显示数据，而无需仅在需要显示数据的地方添加文本，例如在您的情况下 qty_total 会自动更改，而您在 qty 中进行更改，因此将其设为文本

阅读 TextInput 文档。

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

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

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

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

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

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