How to handle display none and block for a View component using react native

Question

In my scenario there are two Views. While load the component i need to none second view after while click on TextInput need to open the second view after selecting the value from the second view selected value should be populate in the first view TextInput after that secondView should be closed.I can acheieve the same effect using react.js but the same effect i am unable to do using react native .

var ViewDisplay = React.createClass({
   componentDidMount(){
       this.refs.secondView.getDOMNode().style.display="none";
   },
   clickHandler:function(){
         this.refs.secondView.getDOMNode().style.display="block";
   },
   populateValue:function(){
        this.refs.secondView.getDOMNode().style.display="none"; 
   },
   render:function(){
     return(<View>           
             <View  ref={firstView}>
                      <TextInput style={styles.textInput} placeholder=  {enter value} onEndEditing={this.clickHandler}/>
             </View>
            <View ref={secondView}>
               <TouchableHighlight underlayColor="#ffa456" onPress={this.populateValue}> 
                    <Text ref={key}>first</Text>
              </TouchableHighlight>
              <TouchableHighlight  underlayColor="#ffa456" onPress={this.populatevalue}>   
                 <Text>Second</Text>
              </TouchableHighlight>
              <TouchableHighlight  underlayColor="#ffa456" onPress={this.populatevalue}>  
                 <Text>third</Text>
             </TouchableHighlight>
           </View>
       </View>)
    }
})

Answer 1

尝试使用点击处理程序在组件状态中设置一个标志，然后使用该标志确定应呈现哪个视图

render() !this.state.clicked ? <View ref={firstView}> ... </View> : <View ref={secondView}> ... </View>