Question

我为主要内容（标题和标题除外）创建了三个子组件

因此第一个组件没有响应。

代码如下：

<div className="row" style={{marginTop:'30px',}}>
        <div className="col-sm-12 col-md-12 col-lg-12">
        <div className="col-sm-3 col-md-3 col-lg-3" style={{display:'-webkit-inline-box', padding:'0px',}}>
            <label style={{backgroundColor: '#ffffff',margin: '5px 10px 5px 5px', position:'relative', float:'left',}} htmlFor="Airport_List">Airport :</label>
            <select value={this.state.airport} onChange={this.handleAirportChange} className="form-control" style={{width:'140px'}}>
            <option value="London">London</option>
            <option value="Houston">Houston</option>
            <option value="California">California</option>
            <option value="New Delhi">New Delhi</option>
            <option value="Moscow">Moscow</option>
            </select> 

        </div> 

        <div className="col-sm-3 col-md-3 col-lg-3" style={{display:'-webkit-inline-box', padding:'0px',}}>

            <span className="fa fa-plane" style={{padding:'5px',fontSize:'20px',}}></span>
            <label style={{backgroundColor: '#ffffff',margin: '5px 10px 5px 5px',}} htmlFor="Flight No">Flight :</label>
            <input style={{
            width:'150px',
            margin: '0',
            outline: '0',
            border: '1px solid #e6ecf0',
            padding:'5px',
            borderRadius: '3px',backgroundColor:'#ffffff',color: 'rgb(158, 158, 158)',}} onChange={this.handleFlightChange}  type="text" id="flightNo" name="flight_no" className="form__input" placeholder="Flight NO"  required/>

        </div>

        <div className="col-sm-3 col-md-3 col-lg-3">

            <div style={{float:'right', display:'-webkit-inline-box',margin:'5px',}}>

            <label style={{backgroundColor: '#ffffff',margin: '5px 6px 5px 5px',}} htmlFor="Date">Date :</label>
            <div className='input-group date' id='datetimepicker8' style={{left:'12px',}}>
            <DateTimePicker 
              onChange={this.onDateChange}
              value={this.state.date}
              minDate={new Date()} 
              name="datetime"

            />
            </div>
            </div> 
        </div>
        <div className="col-sm-2 col-md-2 col-lg-2">

          <Button variant="contained" color="primary" style={{width:'100px', fontSize:'12px'}} onClick={this.handleSubmit}>
               Fetch
          </Button>

         </div>

         <div className="col-sm-1 col-md-1 col-lg-1">

            <div style={{position:'relative', bottom: '10px',}}>
           <Fab color={this.state.color} onClick={()=>this.RecordAudio(this.state.color)}>
             {this.state.icon}
           </Fab>
           </div> 

         </div> 

        </div>

对于Date，我使用了react-datetime-picker（Link）

因此，在全屏模式下

但是如果缩小浏览器屏幕，它将变成这样：

这从未发生过。

Answer 1

确保您拥有适当版本的引导程序，并确保您的脑海中有了这个元标记

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

Answer 2

我重构了您的代码，如下所示

time="2019-01-15T16:04:48.442161704Z" level=error msg="'overlay' not found as a supported filesystem on this host. Please ensure kernel is new enough and has overlay support loaded." storage-driver=overlay2
time="2019-01-15T16:04:48.443237115Z" level=error msg="AUFS was not found in /proc/filesystems" storage-driver=aufs
time="2019-01-15T16:04:48.444209277Z" level=error msg="'overlay' not found as a supported filesystem on this host. Please ensure kernel is new enough and has overlay support loaded." storage-driver=overlay
time="2019-01-15T16:04:48.448467742Z" level=info msg="Graph migration to content-addressability took 0.00 seconds"
time="2019-01-15T16:04:48.451222266Z" level=warning msg="Your kernel does not support oom control"
time="2019-01-15T16:04:48.451238804Z" level=warning msg="Your kernel does not support memory swappiness"
time="2019-01-15T16:04:48.451249423Z" level=warning msg="Your kernel does not support kernel memory limit"
time="2019-01-15T16:04:48.451255189Z" level=warning msg="Unable to find cpu cgroup in mounts"
time="2019-01-15T16:04:48.451287772Z" level=warning msg="Unable to find cpuset cgroup in mounts"
time="2019-01-15T16:04:48.451337670Z" level=warning msg="mountpoint for pids not found"
Error starting daemon: Devices cgroup isn't mounted

如果不使用，请添加Rishab建议的<div className="row" style={{marginTop:'30px',}}> <div className="col-sm-6 col-md-3 col-lg-3" style={{display:'-webkit-inline-box', padding:'0px',}}> <label style={{backgroundColor: '#ffffff',margin: '5px 10px 5px 5px', position:'relative', float:'left',}} htmlFor="Airport_List">Airport :</label> <select value={this.state.airport} onChange={this.handleAirportChange} className="form-control" style={{width:'140px'}}> <option value="London">London</option> <option value="Houston">Houston</option> <option value="California">California</option> <option value="New Delhi">New Delhi</option> <option value="Moscow">Moscow</option> </select> </div> <div className="col-sm-6 col-md-3 col-lg-3" style={{display:'-webkit-inline-box', padding:'0px',}}> <span className="fa fa-plane" style={{padding:'5px',fontSize:'20px',}}> </span> <label style={{backgroundColor: '#ffffff',margin: '5px 10px 5px 5px',}} htmlFor="Flight No">Flight :</label> <input style={{ width:'150px', margin: '0', outline: '0', border: '1px solid #e6ecf0', padding:'5px', borderRadius: '3px',backgroundColor:'#ffffff', color: 'rgb(158, 158, 158)',}} onChange={this.handleFlightChange} type="text" id="flightNo" name="flight_no" className="form__input" placeholder="Flight NO" required/> </div> <div className="col-sm-6 col-md-3 col-lg-3"> <div style={{float:'right', display:'-webkit-inline-box',margin:'5px',}}> <label style={{backgroundColor: '#ffffff',margin: '5px 6px 5px 5px',}} htmlFor="Date">Date :</label> <div className='input-group date' id='datetimepicker8' style={{left:'12px',}}> <DateTimePicker onChange={this.onDateChange} value={this.state.date} minDate={new Date()} name="datetime" /> </div> </div> </div> <div className="col-sm-4 col-md-2 col-lg-2"> <Button variant="contained" color="primary" style={{width:'100px', fontSize:'12px'}} onClick={this.handleSubmit}>Fetch</Button> </div> <div className="col-sm-2 col-md-1 col-lg-1"> <div style={{position:'relative', bottom: '10px',}}> <Fab color={this.state.color} onClick={() => this.RecordAudio(this.state.color)} >{this.state.icon}</Fab> </div> </div> </div>。

如何制作响应组件？

2 个答案: