Question

我正在从动态JSON对象创建一个来自webservice的卡片列表。点击每个卡片项目时我想要双向数据绑定。当我单击每个卡片项并更改相应JSON对象的某些数据更改但在视图中没有更改时。

这是我的代码

import React, { Component } from 'react';
import {
        Platform,
        StyleSheet,
        Text,
        View,
        ImageBackground,
        Image,
        Dimensions,
        TouchableOpacity,
        TextInput,
        ScrollView,
        ActivityIndicator
} from 'react-native';
import { Container, Header, Content, Button, Tab, Tabs, Footer, Left, Body, Right, Icon, Title, Card, CardItem, List, ListItem } from 'native-base';
export default class natureOfInvestment extends React.Component {
        static navigationOptions = {
            header: null
        };

    constructor(props) {
        super(props);
        this.state = {
            session_id: this.props.navigation.state.params.session_id,
            loading: true,
            investmentItems: [],
        }
    }

    componentDidMount() {
        this.onLoadSelectInvestment();
    }

    onLoadSelectInvestment() {
        return fetch(CommonTasks.ROOT_URL + 'user/pageTwo', {
            method: 'GET',
        })
            .then((response) => response.json())
            .then((responseJson) => {
                var investment = responseJson.all_categories;
                var investment_items = [];
                for (var data of investment) {
                    data.showhide = true;
                    data.text = '';
                    investment_items.push(data);
                }
                this.setState({
                    loading: false,
                    investmentItems: investment_items,
                })
            })
    }

    investmentType(e, item) {
        if (item.showhide == true) {
            item.showhide = false;
        }
        else {
            item.showhide = true;
        }
        console.log(item);
    }

    render() {
        return (
            <Container>
                <View>
                    <List style={{ paddingHorizontal: 7 }}
                        dataArray={this.state.investmentItems}
                        renderRow={(item) =>
                            <Card>
                                <CardItem style={{ backgroundColor: item.background_color, }}>
                                    <Body>
                                        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center' }}
                                            key={item.cat_id}
                                            onPress={this.investmentType.bind(this, item)}
                                        >
                                            <View style={{ width: 250, paddingRight: 10 }}>
                                                <Text style={{ color: 'white', fontSize: 17, marginLeft: 10 }}>
                                                    {item.category_name}
                                                </Text>
                                            </View>
                                            <Right>
                                                <Image
                                                    style={{ width: 18, height: 18, }}
                                                    source={require('../assets/images/right_arrow.png')}
                                                />
                                            </Right>
                                        </TouchableOpacity>
                                    </Body>
                                </CardItem>
                                {
                                    item.showhide ?
                                        <View style={{ flexDirection: 'column', margin: 10 }}>
                                            <View style={{ borderColor: 'black', borderRadius: 4, borderWidth: 0.7, }}>
                                                <TextInput
                                                    style={{ textAlignVertical: 'top' }}
                                                    placeholder="Please write the details"
                                                    underlineColorAndroid="transparent"
                                                    multiline={true}
                                                    numberOfLines={4}
                                                    onChangeText={(text) => { item.text = text }}

                                                />
                                            </View>
                                        </View>
                                        : null
                                }
                            </Card>
                        }
                    />
                </View>
            </Container>
        );
    }
}

我想显示/隐藏TextInput视图或更改JSONobject中将反映在列表视图中的数据。

提前致谢。

对于React Native的双向数据绑定，更改不会反映在View中

0 个答案: