在React+Reactstrap环境下如何将输入的表单数据添加到表格行？

核心思路是通过React状态驱动UI渲染，不要手动操作DOM插入节点，所有表格数据用状态统一管理：

步骤1：声明所需状态 #

在函数组件顶部引入useState，声明两个状态分别管理表单输入值和表格数据列表：

import { useState } from 'react';
import { Row, Col, FormGroup, Label, Input, Button, CardBody, Table } from 'reactstrap';

// 组件内部
const YourComponent = () => {
  // 表单输入状态
  const [formData, setFormData] = useState({
    proName: '',
    storeName: '',
    pPrice: ''
  });
  // 表格数据列表状态
  const [tableData, setTableData] = useState([]);

步骤2：实现表单双向绑定逻辑 #

给每个输入框绑定value和onChange事件，同步输入内容到表单状态，同时修正原代码中输入框type属性的错误（原代码把字段名写在了type位置，实际应该是text/number类型）：

// 输入框内容变化时更新表单状态
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({...prev, [name]: value}));
  };

  // 添加按钮点击逻辑
  const handleAdd = () => {
    // 简单非空校验
    if (!formData.proName.trim() || !formData.storeName.trim() || !formData.pPrice.trim()) return;
    // 追加新数据到表格列表，返回新数组触发重渲染
    setTableData(prev => [...prev, {...formData}]);
    // 清空表单
    setFormData({proName: '', storeName: '', pPrice: ''});
  };

步骤3：修改JSX结构 #

表单部分绑定事件，表格部分遍历状态渲染行：

return (
    <>
      {/* 表单部分 */}
      <Row form>
        <Col md={6}>
          <FormGroup>
            <Label for="proName">Product Name</Label>
            <Input 
              type="text" 
              name="proName" 
              id="proName" 
              placeholder="Product Name"
              value={formData.proName}
              onChange={handleInputChange}
            />
          </FormGroup>
        </Col>
        <Col md={6}>
          <FormGroup>
            <Label for="storeName">Store Name</Label>
            <Input 
              type="text" 
              name="storeName" 
              id="storeName" 
              placeholder="Store Name"
              value={formData.storeName}
              onChange={handleInputChange}
            />
          </FormGroup>
        </Col>
        <Col md={6}>
          <FormGroup>
            <Label for="pPrice">Price</Label>
            <Input 
              type="number" 
              name="pPrice" 
              id="pPrice" 
              placeholder="Price"
              value={formData.pPrice}
              onChange={handleInputChange}
            />
          </FormGroup>
        </Col>
      </Row>
      {/* 添加按钮 */}
      <Button color="primary" onClick={handleAdd}>添加</Button>

      {/* 表格部分 */}
      <CardBody>
        <Table className="tablesorter" responsive>
          <thead className="text-primary">
            <tr>
              <th>Store</th>
              <th>Product</th>
              <th>Price</th>
            </tr>
          </thead>
          <tbody id="tbid">
            {/* 遍历表格数据渲染行 */}
            {tableData.map((item, index) => (
              <tr key={index}>
                <td>{item.storeName}</td>
                <td>{item.proName}</td>
                <td>{item.pPrice}</td>
              </tr>
            ))}
          </tbody>                 
        </Table>
      </CardBody>
    </>
  )
}

export default YourComponent;

注意事项 #

• 不要用原生JS操作#tbid插入DOM节点，React会根据状态自动更新UI
• 生产环境建议给每条表格数据加唯一id作为遍历的key，替代示例中的索引值

内容的提问来源于stack exchange，提问作者noobcode0000