如何在单击时将新的输入行添加到表中？
下面是我的 React 项目的一个组件。该组件的基础是一个最初显示一个输入行的表格。
import React, { Component } from "react";
import { Navbar, Table, Form } from "react-bootstrap";
import Nav from "./Nav";
import "../client/scss/import.scss";
// import Logo from "./images/logo.svg";
class Import extends Component {
state = {
collapseID: ""
};
render() {
return (
<div>
<Nav />
<div className="import">
<h1>Import New Schedule</h1>
<div className="importTable">
<Table className="table table-hover" id="tables">
<thead className="thead-dark">
<tr>
<th>Queue</th>
<th>Start Date</th>
<th>End Date</th>
<th>Day of Week</th>
<th>Time Start</th>
<th>Time End</th>
<th>Capacity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<Form.Control as="select">
<option>Veteran Affairs</option>
<option>Older Australians</option>
<option>Disability Sickness Carers</option>
<option>Report Employment Income</option>
</Form.Control>
</td>
<td>
<input
className="form-control"
type="date"
value="2011-08-19"
id="example-date-input"
/>
</td>
<td>
<input
className="form-control"
type="date"
value="2011-08-19"
id="example-date-input"
/>
</td>
);
}
}
export default Import;
在底部您将看到该<button id="addRow">+ Add</button>元素。每次单击此按钮时，我希望将一个新行附加到现有表中，以便其他输入字段可见。我应该使用 jQuery 来实现这个吗？有人可以协助指导我如何做到这一点吗？下面是当前在我的浏览器上显示的屏幕截图（如果有帮助的话）：
沧海一幻觉2回答
-
红颜莎娜
如果您正在寻找成熟的解决方案，可以使用以下解决方案。执行我们最初创建了一个表单结构 const initialForm = { id:1, queueType:'', startDate:'2011-08-19', endDate:'2011-08-19', week:'', startTime:'13:45:00', endTime:'13:45:00', capacity:0 }每次按下时Add，都会将表单结构的副本推送到formArray并迭代此表单数组。该setFormValue()功能将更新formArray. setFormValue = (e, index)=>{ let {formArray} = this.state; formArray[index][e.target.name] = e.target.value; this.setState({ formArray }) }更新表单在dom中渲染（为了看到实时更新），我们使用<pre>{JSON.stringify(this.state.formArray)}</pre>该组件作为类组件实现。import React, { Component } from "react";import { Navbar, Table, Form } from "react-bootstrap";const initialForm = { id:1, queueType:'', startDate:'2011-08-19', endDate:'2011-08-19', week:'', startTime:'13:45:00', endTime:'13:45:00', capacity:0}export default class Hello extends Component { constructor(props){ super(props); this.state = { collapseID: "", formArray:[ { ...initialForm } ] }; this.addNewForm = this.addNewForm.bind(this); } addNewForm = ()=>{ let newForm = {...initialForm}; newForm.id = this.state.formArray[this.state.formArray.length -1].id +1; this.setState(prevState =>{ return { ...prevState, formArray:[...prevState.formArray, newForm] } }) } setFormValue = (e, index)=>{ let {formArray} = this.state; formArray[index][e.target.name] = e.target.value; this.setState({ formArray }) } removeForm=(id)=>{ const formArray = this.state.formArray.filter(form => form.id != id) this.setState({formArray}) } render() { return ( <div> <div className="import"> <h1>Import New Schedule</h1> <div className="importTable"> <Table className="table table-hover" id="tables"> <thead className="thead-dark"> <tr> <th>Queue</th> <th>Start Date</th> <th>End Date</th> <th>Day of Week</th> <th>Time Start</th> <th>Time End</th> <th>Capacity</th> </tr> </thead> <tbody> {this.state.formArray.map((form,index)=>( <tr key={form.id}> <td> <select name="queueType" defaultValue={form.queueType} onChange={()=>this.setFormValue(event,index)}> <option>Veteran Affairs</option> <option>Older Australians</option> <option>Disability Sickness Carers</option> <option>Report Employment Income</option> </select> </td> <td> <input className="form-control" type="date" name="startDate" defaultValue={form.startDate} onChange={()=>this.setFormValue(event,index)} id="example-date-input" /> </td> <td> <input className="form-control" type="date" name="endDate" defaultValue={form.endDate} onChange={()=>this.setFormValue(event,index)} id="example-date-input" /> </td> <td> <select name="week" defaultValue={form.week} onChange={()=>this.setFormValue(event,index)}> <option>Monday</option> <option>Tuesday</option> <option>Wednesday</option> <option>Thursday</option> <option>Friday</option> <option>Saturday</option> <option>Sunday</option> </select> </td> <td> <input className="form-control" type="time" name="startTime" defaultValue={form.startTime} onChange={()=>this.setFormValue(event,index)} id="example-time-input" /> </td> <td> <input className="form-control" type="time" name="endTime" defaultValue={form.endTime} onChange={()=>this.setFormValue(event,index)} id="example-time-input" /> </td> <td> <input className="form-control" type="number" defaultValue={form.capacity} onChange={()=>this.setFormValue(event,index)} name="capacity" id="example-number-input" /> </td> <td> <button type="button" onClick={()=>this.removeForm(form.id)}>- Remove</button> </td> </tr> ))} </tbody> </Table> <button id="addRow" onClick={this.addNewForm}>+ Add</button> </div> </div> <pre> {JSON.stringify(this.state.formArray)} </pre> </div> ); }} -
蓝山帝景
将表格行变成一个单独的组件。我们称之为行// Create a state for the amount of rows you want to viewconst [rowCount,setRowCount] = useState(1);在 render 方法中执行以下循环。const rowArray = [];for (let i = 0; i < rowCount; i++) { rowArray.push(<Row>)} 将 rowArray 变量插入到 render 方法的返回值内。{rowArray}您的最终代码应如下所示。class Import extends Component { state = { collapseID: "", rowCount: 1, }; _addRow = () => { const { rowCount } = this.state; this.setState(rowCount + 1); } render() { const { rowCount } = this.state; const rowArray = []; for (let i = 0; i < rowCount; i++) { rowArray.push(<Row>) } return ( <div> <Nav /> <div className="import"> <h1>Import New Schedule</h1> <div className="importTable"> <Table className="table table-hover" id="tables"> <thead className="thead-dark"> <tr> <th>Queue</th> <th>Start Date</th> <th>End Date</th> <th>Day of Week</th> <th>Time Start</th> <th>Time End</th> <th>Capacity</th> </tr> </thead> <tbody> {rowArray} </tbody> </Table> <button id="addRow" onClick={_addRow}>+ Add</button> </div> </div> </div> ); }}export default Import;
随时随地看视频慕课网APP
相关分类
Go