在react native中隐藏/显示组件

Crysfel：

我真的是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。
另外，如何从一开始就隐藏按钮？

Mayank Patel：

我会做这样的事情：

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()}          
        );
    }

});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。