如何在下一行显示动态受控表单？
我要显示这样的页面：
但是当我想使用此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”类名放在“表单”之前，然后显示可以像第一个图像一样，但是问题是当单击“添加字段”按钮时它无法添加动态表单，并且它什么也不做。我可以知道如何解决这个问题吗？如果您知道该怎么做，也可以提供示例代码并附带说明吗？这是因为我仍在学习如何使用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>
第一行就可以了：
添加下一行时，显示如下：
我可以知道如何解决这个问题吗？谢谢。
2 个答案:
答案 0 :(得分：1)
您应该将所有div像这样排成一行
System.ArgumentException: Keyword not supported: 'data source'.
at System.Data.Entity.Core.EntityClient.Internal.DbConnectionOptions.ParseInternal(IDictionary`2 parsetable, String connectionString, IList`1 validKeywords)
at System.Data.Entity.Core.EntityClient.Internal.DbConnectionOptions..ctor(String connectionString, IList`1 validKeywords)
at System.Data.Entity.Core.EntityClient.EntityConnection.ChangeConnectionString(String newConnectionString)
at System.Data.Entity.Core.EntityClient.EntityConnection..ctor(String connectionString)
at System.Data.Entity.Internal.LazyInternalConnection.InitializeFromConnectionStringSetting(ConnectionStringSettings appConfigConnection)
at System.Data.Entity.Internal.LazyInternalConnection.TryInitializeFromAppConfig(String name, AppConfig config)
at System.Data.Entity.Internal.LazyInternalConnection.Initialize()
at System.Data.Entity.Internal.LazyInternalConnection.CreateObjectContextFromConnectionModel()
at System.Data.Entity.Internal.LazyInternalContext.InitializeContext()
at System.Data.Entity.Internal.InternalContext.Initialize()
at System.Data.Entity.Internal.InternalContext.GetEntitySetAndBaseTypeForType(Type entityType)
at System.Data.Entity.Internal.Linq.InternalSet`1.Initialize()
at System.Data.Entity.Internal.Linq.InternalSet`1.get_InternalContext()
at System.Data.Entity.Infrastructure.DbQuery`1.System.Linq.IQueryable.get_Provider()
答案 1 :(得分：0)
您可以使用表格行类
<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"/>
希望对您有帮助
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？