javascript - 如何让动态控制的窗体显示在下一行？

Question

我想显示这样的页面:

但是当我想用这个 jQuery/JavaScript 方法将其作为动态表单来制作动态受控输入表单时:

https://jsfiddle.net/aaki/hMJEy/1/

变成这样:

我可以知道如何用它调整布局吗:

这是代码:

<form onSubmit={this.addTodo}>
 <div class="multi-field-wrapper">
  <div class="multi-fields">
   <div class="multi-field">
     <Button
      type="submit"
      className="btn show-modal"
      onClick={() =>
       this.setState({
        showModal: !showModal
       })
      }
     >
     Send Email
     </Button>

     <Button
       type="submit"
       className="btn show-portal"
       onClick={() =>
        this.setState({
         showPortal: !showPortal
        })
       }
      >
      Send SMS
      </Button>

      <Modal
        header="Send Email"
        open={showModal}
        onClose={() =>
         this.setState({
         showModal: false
         })
        }
       >
      <h1>Send Email</h1>
      <p>Send Email</p>
      <div className="form-group">
      <Col md="6">
      <Label htmlFor="text-input">Email</Label>
      </Col>
      <Col xs="12" md="9">
      <Input type="text" id="text-input" name="text-input" placeholder="Email" value={this.state.email} onChange={this.handleEmailChange} required/>
      </Col>
      </div>

      <div className="form-group">
      <Col md="6">
      <Label htmlFor="text-input">Subject</Label>
      </Col>
      <Col xs="12" md="9">
      <Input type="text" id="text-input" name="text-input" placeholder="device alert" value="{{this.state.topic}} alert" required/>
      </Col>
      </div>

      <div className="form-group">
      <Col md="6">
      <Label htmlFor="text-input">Message</Label>
      </Col>
      <Col xs="12" md="9">
      <textarea className="textarea" id="text-input" name="text-input" placeholder="Message" value="Hey there, {{this.state.topic}} was {{last_value}} at {{trigger_timestamp|timestampformat('Asia/Kuala_Lumpur')}}." required/>
       </Col>
       </div>

       <div className="form-group">
       <Col md="6">
       </Col>
       <Col xs="12" md="9">
       </Col>
       </div>
       <div className="form-group">
       <Col md="6">
       </Col>
       <Col xs="12" md="9">
       </Col>
       </div>
       <div className="form-group">
       <Col md="6">
       </Col>
       <Col xs="12" md="9">
       </Col>
       </div>
       <div className="form-group">
       <Col md="6">
       </Col>
       <Col xs="12" md="9">
       </Col>
       </div>
       <div className="form-group">
       <Col md="6">
       </Col>
       <Col xs="12" md="9">
       </Col>
       </div>

       <FormGroup row>
        <Col md="3">
        </Col>
       <Col xs="12" md="9">
       <span className="icon is-small"></span>
       <Button type="submit" size="sm" color="primary"><i className="fas fa-dot-circle"></i> Submit</Button>
       </Col>
       </FormGroup>
       <span className="icon is-small"></span>

       </Modal>

       <Portal
        open={showPortal}
        header="Send SMS"
        onClose={() =>
        this.setState({
         showPortal: false
         })
        }
       >
       <h1>Send SMS</h1>
        <p>Send SMS</p>

        <div className="form-group">
        <Col md="6">
        <Label htmlFor="text-input">Country</Label>
        </Col>
        <Col xs="12" md="9">
        <Input type="text" id="text-input" name="text-input" placeholder="+6 Malaysia" value="+6 Malaysia" required/>
        </Col>
        </div>

        <div className="form-group">
         <Col md="6">
          <Label htmlFor="text-input">Phone number</Label>
         </Col>
         <Col xs="12" md="9">
         <Input type="text" id="text-input" name="text-input" placeholder="Phone number" value={this.state.contact} onChange={this.handleContactChange} required/>
          </Col>
         </div>

         <div className="form-group">
          <Col md="6">
           <Label htmlFor="text-input">Message</Label>
          </Col>
          <Col xs="12" md="9">
          <textarea className="textarea" id="text-input" name="text-input" placeholder="Message" value="Hey there, {{this.state.topic}} was {{last_value}} at {{trigger_timestamp|timestampformat('Asia/Kuala_Lumpur')}}." required/>
          </Col>
         </div>

         <div className="form-group">
          <Col md="6">
          </Col>
          <Col xs="12" md="9">
          </Col>
         </div>
         <div className="form-group">
          <Col md="6">
          </Col>
          <Col xs="12" md="9">
          </Col>
         </div>
         <div className="form-group">
          <Col md="6">
          </Col>
          <Col xs="12" md="9">
          </Col>
         </div>
         <div className="form-group">
          <Col md="6">
          </Col>
          <Col xs="12" md="9">
          </Col>
         </div>
         <div className="form-group">
          <Col md="6">
          </Col>
          <Col xs="12" md="9">
          </Col>
         </div>

         <FormGroup row>
          <Col md="3">
          </Col>
          <Col xs="12" md="9">
          <span className="icon is-small"></span>
          <Button type="submit" size="sm" color="primary"><i className="fas fa-dot-circle"></i> Submit</Button>
           </Col>
           </FormGroup>
           </Portal>
           <div className="is-small">
            <select onChange={this.handleTopicChange} required>
             <option>Select topic</option>
              {
               this.state.topicData.map((item, index) =>
               <option key={item.topic} value={this.state.topic}>{item.topic}</option>
              )
             }
            </select>
           </div>
           <input type="text" placeholder="temperature" value="temperature" disabled/>
           <div>is</div>
           <div className="select is-small">
           <select id="selColor" value={this.state.selectedOption} onChange={this.handleChange}>
           <option selected value="equal">Equal to</option>
           <option value="notequal">Not equal to</option>
           <option value="greater_than">Greater than</option>
           <option value="smaller_than">Less than</option>
           <option value="goe">Greater than or equal to</option>
           <option value="loe">Less than or equal to</option>
          </select>
         </div>
         <span></span>
         <input id="test1" className="hideable" type="text" value={this.state.equal} onChange={this.handleEqualChange} />
         <input id="test2" className="hideable" type="text" value={this.state.notequal} onChange={this.handleNotEqualChange} />
         <input id="test3" className="hideable" type="text" value={this.state.greater_than} onChange={this.handleGreaterThanChange} />
         <input id="test4" className="hideable" type="text" value={this.state.smaller_than} onChange={this.handleSmallerThanChange} />
         <input id="test5" className="hideable" type="text" value={this.state.goe} onChange={this.handleGOEChange} />
         <input id="test6" className="hideable" type="text" value={this.state.loe} onChange={this.handleLOEChange} />
         <span></span>
         <i className="far fa-trash-alt"></i>
         <button type="button" className="remove-field">Remove</button>
         <button type="button" className="add-field">Add field</button>
        </div>
       </div>
      </div>
    </form>

我尝试将“multifield-wrapper”类名放在“form”之前，然后显示可以像第一个图像一样，但问题是单击“添加字段”按钮时无法添加动态表单，并且它什么也不做。我可以知道如何解决这个问题吗？如果您知道如何做，您也可以提供示例代码和解释吗？因为我还在学习如何用 React 来做，谢谢。

更新代码

我可以通过将 JavaScript 放入表单中来将所有文本框放在一行中，但问题是当我在下一行中再添加一行时，文本框显示如下，如下面的第二张图片所示:

这是代码:

<form onSubmit={this.addTodo}> 
 <div className="row">
  <div className="multi-field-wrapper">
   <div className="multi-fields">
    <div className="multi-field">
     <div className="col-md-2 is-small">
      <select onChange={this.handleTopicChange} required>
       <option>Select topic</option>
        {
         this.state.topicData.map((item, index) =>
          <option key={item.topic} value={this.state.topic}>{item.topic}</option>
         )
        }
      </select>
     </div>
     <input className="col-md-2" type="text" placeholder="temperature" value="temperature" disabled/>
      <div className="col-md-1">is</div>
       <div className="select col-md-2 is-small">
        <select id="selColor" value={this.state.selectedOption} onChange={this.handleChange}>
         <option value="equal">Equal to</option>
         <option value="notequal">Not equal to</option>
         <option value="greater_than">Greater than</option>
         <option value="smaller_than">Less than</option>
         <option value="goe">Greater than or equal to</option>
         <option value="loe">Less than or equal to</option>
        </select>
       </div>
       <input id="test1" className="hideable col-md-1" type="text" value={this.state.equal} onChange={this.handleEqualChange} />
       <input id="test2" className="hideable col-md-1" type="text" value={this.state.notequal} onChange={this.handleNotEqualChange} />
       <input id="test3" className="hideable col-md-1" type="text" value={this.state.greater_than} onChange={this.handleGreaterThanChange} />
       <input id="test4" className="hideable col-md-1" type="text" value={this.state.smaller_than} onChange={this.handleSmallerThanChange} />
       <input id="test5" className="hideable col-md-1" type="text" value={this.state.goe} onChange={this.handleGOEChange} />
       <input id="test6" className="hideable col-md-1" type="text" value={this.state.loe} onChange={this.handleLOEChange} />
       <button type="button" className="remove-field col-md-2">Remove</button>      
       <button type="button" className="add-field col-md-2">Add field</button>
      </div>
     </div>
    </div>
   </div>
  </form>

第一行没问题:

当添加下一行时，显示如下:

我可以知道如何解决这个问题吗？谢谢。

Answer 1

你应该将所有 div 保留在一行中

<div class = "row">
   <div class ="col-lg-12">
      //put your all child div here which you wants to keep in one row and properly divide the col-lg-12 for every child div
   </div>
</div>