先上代码吧

var test = [
    <option>wen</option>,
    <option>wen</option>,
    <option>wen</option>,
    <option>wen</option>
];
var SearchBar = React.createClass({
    render:function(){
        var style = {
            enInput:{
                display:'block'
            },
            disInput:{
                display:'none'
            },
            tipsBorder:{
                border:'1px solid #000'
            },
            InputWidth:{
                width:'20%'
            },
            tipsWidth:{
                width:'20%'
            }
        }
        return (
        <div id='searchBar'>
            <input id="searchInput" onChange={this.handleChange} style={style.InputWidth} />
            <input type='button' id='search' value='Search' />
           <div id='tips' style={merge(style.tipsWidth,style.tipsBorder,this.state.disInput?style.disInput:style.enInput)} > {this.state.test}
           </div>
       </div>
        )
    },
    getInitialState:function(){
        return {
            test:test,
            disInput:true
        }
    },
    handleChange:function(event){
        if(event.target.value == ''){
            this.setState({disInput:true});
        }else{
            this.setState({disInput:false});
        }
        return false;
    }
})
React.render(
    <SearchBar />,
    document.getElementById('searchBar')
);