javascript - 如何在单击时将新的输入行添加到表中？

Question

下面是我的 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>
                  <td>
                    <Form.Control as="select">
                      <option>Monday</option>
                      <option>Tuesday</option>
                      <option>Wednesday</option>
                      <option>Thursday</option>
                      <option>Friday</option>
                      <option>Saturday</option>
                      <option>Sunday</option>
                    </Form.Control>
                  </td>
                  <td>
                    <input
                      className="form-control"
                      type="time"
                      value="13:45:00"
                      id="example-time-input"
                    />
                  </td>
                  <td>
                    <input
                      className="form-control"
                      type="time"
                      value="13:45:00"
                      id="example-time-input"
                    />
                  </td>
                  <td>
                    <input
                      className="form-control"
                      type="number"
                      value="0"
                      id="example-number-input"
                    />
                  </td>
                </tr>
              </tbody>
            </Table>
            <button id="addRow">+ Add</button>
          </div>
        </div>
      </div>
    );
  }
}

export default Import;

在底部，您将看到 <button id="addRow">+ Add</button>元素。每次单击此按钮时，我希望将一个新行附加到现有表中，以便其他输入字段可见。我应该使用 jQuery 来实现这个吗？有人可以协助指导我如何做到这一点吗？下面是当前在我的浏览器上显示的屏幕截图(如果有帮助的话):

Answer 1

如果您正在寻找成熟的解决方案，可以使用以下解决方案。Stackblitz 片段可以找到 Here

实现

我们最初创建了一个表单结构

  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>
    );
  }
}