在react本机中隐藏/显示组件
在react本机中隐藏/显示组件
提问于 2015-05-16 02:55:28
我是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，然后在用户按下cancel按钮时隐藏TouchableHighlight。
我不知道如何“访问”TouchableHighlight组件，以便在我的函数showCancel/hideCancel中隐藏/显示它。
另外，我如何从一开始就隐藏按钮？
回答 23
Stack Overflow用户
回答已采纳
发布于 2015-05-16 04:27:34
我会这样做：
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()}
);
}
});Stack Overflow用户
发布于 2016-11-15 05:03:13
在渲染函数中：
{ this.state.showTheThing &&
<TextInput/>
}那就这样做：
this.setState({showTheThing: true}) // to show it
this.setState({showTheThing: false}) // to hide itStack Overflow用户
发布于 2016-12-15 08:01:38
在render()中，您可以有条件地显示JSX或返回null，如下所示：
render(){
return({yourCondition ? <yourComponent /> : null});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30266831
复制相关文章
相似问题