如何在下一行显示动态控制的窗体?
How to display the dynamic controlled form in the next row?
我想这样显示页面:
但是当我想用这个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"之前,这样显示就可以像第一张图片一样,但问题是点击'Add field'时无法添加动态表单按钮,它什么都不做。我可以知道如何解决这个问题吗?如果您知道该怎么做,您也可以提供示例代码和解释吗?因为我还在学习如何使用 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>
第一行可以:
添加下一行时显示如下:
请问如何解决这个问题?谢谢。
您应该将所有 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>
你可以使用表格行class
<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"/>
希望对你有所帮助
我想这样显示页面:
但是当我想用这个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"之前,这样显示就可以像第一张图片一样,但问题是点击'Add field'时无法添加动态表单按钮,它什么都不做。我可以知道如何解决这个问题吗?如果您知道该怎么做,您也可以提供示例代码和解释吗?因为我还在学习如何使用 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>
第一行可以:
添加下一行时显示如下:
请问如何解决这个问题?谢谢。
您应该将所有 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>
你可以使用表格行class
<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"/>
希望对你有所帮助