先上代码吧 <pre> <code> 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’) ); </code> </pre> 这是我自己写的一个小组件，就是类似于搜索输入框，并且输入字母后会见给出提示（给出提示这个，代码里面还是硬编码的），上面我把searchInput和tips是设为一个长度的，所以我本来想共用一个width，但是如果这样写，打开浏览器测试，两个dom都被隐藏了，必须要这样分开，求问是怎么回事