0

当用户按下特定商店名称时，我希望能够呈现有关特定商店的更多详细信息。现在，我只渲染商店名称，使用 map() 我通过导入包含所有相关数据的配置文件来获取所有信息。配置文件是一个 JSON 文件。每个商店都有一个 id、openingTime、closeingTime、address 和 branchName。

我的 StoreList 文件如下所示：

import React, { Component } from 'react'
import { View } from 'react-native'
import Config from '../Config';
import StoreDetail from './StoreDetail';

class StoreList extends Component {
    constructor() {
        super();
        this.state = {
            costcoStoreList: []
        }
    }
    componentWillMount() {
        const obj = Config;
        obj.costcoThree = Object.values(obj.costcoThree)
        console.log(typeof(obj.costcoThree));
        this.setState({
            costcoStoreList: obj.costcoThree

        }) 

    }

    renderStores() {
        return this.state.costcoStoreList.map(store => 
            <StoreDetail key={store.id} 
                store={store}
            press={this.press}

            />);
    }
    render() {
        return (
            <View>
                {this.renderStores()}
            </View>
        );
    }
}

export default StoreList;

在我的 StoreDetail 文件中，我只渲染了 branchName。 

import React, { Component } from 'react';
import { Text, TouchableWithoutFeedback, View } from 'react-native';
import { Card } from '../common';
import { CardSection }from '../common/';
import { Button } from '../common';

class StoreDetail extends Component {
    render() {
        const {branchName} = this.props.store;
    return (
            <TouchableWithoutFeedback
                onPress={() => console.log('you pressed this ' )}
            >
                <View>
                    <Card>

                        <CardSection>
                            <Text>{branchName}</Text>
                        </CardSection>
                    </Card>
                </View>
            </TouchableWithoutFeedback>

        );
    }
};

export default StoreDetail;

我希望能够按下商店以呈现有关该商店的其他信息（商店营业时间、位置等）。

我看过几个不同的问题1和这个2。第二个链接的答案是传递我已经尝试过的点击事件，但我不确定它是如何工作的，即使我能够传递道具并在 StoreDetail 中访问它们。我知道一旦我将 storeId（或 branchName）链接到 onPress 事件，我将能够呈现附加信息，但我不知道该怎么做。

4

1 回答 1

2

将布尔变量添加到状态，例如

this.setState({isDetailVisible: false});  // set it in the constructor

在按钮事件处理程序中更新此状态，例如 onPress()：

this.setState({isDetailVisible: true});

在 StoreDetail 的渲染函数中

<View>
    <Card>
        <CardSection>
            <Text>{branchName}</Text>
        </CardSection>
    </Card>
    {this.state.isDetailVisible && renderDetails(); } //<-- try this
</View>

这里把你的 JSX 的细节放在函数 renderDetails 中：

renderDetails() {
return (
        <View>
            <Text>{someDetailInfo}</Text>
        </View>
    );
}
于 2018-02-20T08:58:26.417 回答