Fatal编程技术网
  • javascript/
  • Javascript 如何在下一行显示动态受控窗体？

Javascript 如何在下一行显示动态受控窗体？

javascript jquery reactjs

Javascript 如何在下一行显示动态受控窗体？,javascript,jquery,reactjs,dynamic-forms,Javascript,Jquery,Reactjs,Dynamic Forms,我想这样显示页面： 但是，当我想使用jQuery/JavaScript方法将其作为动态表单来创建动态受控输入表单时： 它变成这样： 我可以知道如何使用它调整布局吗： 代码如下： <form onSubmit={this.addTodo}> <div class="multi-field-wrapper"> <div class="multi-fields"> <div class="multi-field"> <B

我想这样显示页面：

但是，当我想使用jQuery/JavaScript方法将其作为动态表单来创建动态受控输入表单时：

它变成这样：

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

代码如下：

<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>

<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>


这是我的国家({
showModal:！showModal
})
}
>
发送电子邮件
这是我的国家({
showPortal:！showPortal
})
}
>
发送短信
这是我的国家({
showModal:错误
})
}
>
发送电子邮件
发送电子邮件

电子邮件
主题
消息
提交
这是我的国家({
showPortal:错误
})
}
>
发送短信
发送短信

国家
电话号码
消息
提交
选择主题
{
this.state.topicData.map（（项目，索引）=>
{item.topic}
)
}
是
等于
不等于
大于
少于
大于或等于
小于或等于
去除
添加字段
我已经尝试将“多字段包装器”类名放在“表单”之前，这样显示可以像第一个图像一样，但问题是当单击“添加字段”按钮时，它无法添加动态表单，并且它什么也不做。我可以知道如何解决这个问题吗？如果你知道怎么做，你能提供示例代码和解释吗？这是因为我还在学习如何用React来做，谢谢

更新代码

通过将javascript放入表单中，我可以将所有文本框放在一行中，但问题是，当我在下一行中再添加一行时，文本框显示如下图2所示：

代码如下：

<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>

<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>


选择主题
{
this.state.topicData.map（（项目，索引）=>
{item.topic}
)
}
 
是
等于
不等于
大于
少于
大于或等于
小于或等于
去除
添加字段
第一行可以：

添加下一行时，显示如下所示：

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

您应该像这样将所有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>


//将您希望保留在一行的所有子div放在这里，并为每个子div正确划分col-lg-12
您可以使用表单行类

<div className="form-row">
如果要在同一行中包含两个元素

  <div className="form-row">
  <div className="form-group col-md-6">
    <label >email</label>
    <input type="text"/>
</div>
  <div className="form-group col-md-6">
    <label>message</label>
    <input type="text" />
</div>
</div>


电子邮件
消息
如果您希望一行中有一个输入

 <div className="form-group col-md-12">
<label >email</label>
<input type="text"/>


电子邮件

希望对您有所帮助

对不起，我尝试了你的代码，但这是无法做到的&文本框的显示现在彼此合并…将你的文本框放在单独的separateimport bootstrap版本3中，然后它将工作它仍然是相同的，因为所有文本输入仅显示在右角…因此，如果使用你的代码，它将使所有文本输入彼此合并。