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

Question

我对 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 中隐藏/显示它。

另外，如何从一开始就隐藏按钮？

原文由 Crysfel 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

 });

原文由 Mayank Patel 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在你的渲染函数中：

 { this.state.showTheThing &&
  <TextInput/>
}

然后就这样做：

 this.setState({showTheThing: true})  // to show it
this.setState({showTheThing: false}) // to hide it

原文由 Krishan Gupta 发布，翻译遵循 CC BY-SA 3.0 许可协议