在本机反应中隐藏/显示组件

小编典典

在本机反应中隐藏/显示组件

all

我对 React Native 很陌生，我想知道如何隐藏/显示组件。
这是我的测试用例：

<TextInput
    onFocus={this.showCancel()}
    onChangeText={(text) => this.doSearch({input: text})} />

<TouchableHighlight 
    onPress={this.hideCancel()}>
    <View>
        <Text style={styles.cancelButtonText}>Cancel</Text>
    </View>
</TouchableHighlight>

我有一个TextInput组件，我想要的是TouchableHighlight在输入获得焦点时显示，然后TouchableHighlight在用户按下取消按钮时隐藏。

我不知道如何“访问”TouchableHighlight组件以便在我的函数中隐藏/显示它showCancel/hideCancel。
另外，如何从一开始就隐藏按钮？

阅读 90

2022-07-18

共1个答案

小编典典

我会做这样的事情：

var myComponent = React.createComponent({

    getInitialState: function () {
        return {
            showCancel: false,
        };
    },

    toggleCancel: function () {
        this.setState({
            showCancel: !this.state.showCancel
        });
    }

    _renderCancel: function () {
        if (this.state.showCancel) {
            return (
                <TouchableHighlight 
                    onPress={this.toggleCancel()}>
                    <View>
                        <Text style={styles.cancelButtonText}>Cancel</Text>
                    </View>
                </TouchableHighlight>
            );
        } else {
            return null;
        }
    },

    render: function () {
        return (
            <TextInput
                onFocus={this.toggleCancel()}
                onChangeText={(text) => this.doSearch({input: text})} />
            {this._renderCancel()}          
        );
    }

});

2022-07-18