如何在点击时向表格添加新的输入行？

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 片段可以在这里找到

执行

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

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

Answer 2

使您的表格行成为一个单独的组件。 让我们称之为一行

// Create a state for the amount of rows you want to view
const [rowCount,setRowCount] = useState(1);

在 render 方法中执行以下循环。

const rowArray = [];

for (let i = 0; i < rowCount; i++) {
  rowArray.push(<Row>)
} 

在 render 方法的返回值中插入 rowArray 变量。

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