在 table 中添加新行并为每个下拉按钮设置单独的状态

Question

我有一个 table，它由下拉菜单组成。从默认行 selected 值后，将填充更多标签。我想在单击“+”按钮并使用单独的值再次使用 selection 过程时添加一个新行。

我尝试过的事情：我添加了一个函数作为 addRows 但它陷入了无限添加行的状态。其次，我尝试使用行索引设置状态唯一，但也没有成功。

export default class MedTable extends React.Component {
  state = {
    selectedCondition: "Select Condition",
    selectedConditionCarriers: [],
    rows: [1],
  };

  addRow = () => {
    var newRows = this.state.rows;
    newRows.push("new row");
    this.setState({ rows: newRows });
  };

  render() {
    console.log(this.state);
    const { carriers, medicalConditions } = Data;
    const { selectedConditionCarriers, selectedCondition, rows } = this.state;
    return (
      <Container fluid className="MedTable">
        <Table
          dark
          hover
          striped
          bordered
          responsive
          className="tc animate__animated animate__bounceInUp "
        >
          <thead>
            <tr>
              <th>#</th>
              <th>Medical Conditions</th>
              {carriers.map((item, index) => {
                return <th key={index}>{item}</th>;
              })}

              <th></th>
            </tr>
          </thead>
          <tbody>
            {rows.map((item, index) => {
              return (
                <tr key={index}>
                  <td>{index}</td>
                  <td>
                    <Dropdown as={ButtonGroup}>
                      <Button
                        size="sm"
                        className="ButtonToolbar"
                        color="info"
                        onClick={this.addRow()}
                      >
                        +
                      </Button>
                      <Button variant="success">{selectedCondition}</Button>
                      <Dropdown.Toggle
                        split
                        variant="success"
                        id="dropdown-split-basic"
                      />
                      <Button
                        size="sm"
                        className="ButtonToolbar"
                        color="danger"
                        onClick={() => {
                          this.setState({
                            selectedCondition: "Select Condition",
                            selectedConditionCarriers: [],
                          });
                        }}
                      >
                        x
                      </Button>

                      <Dropdown.Menu>
                        {medicalConditions.map((item, index) => {
                          return (
                            <Dropdown.Item
                              key={index}
                              onClick={() => {
                                this.setState({
                                  selectedCondition: item.condition,
                                  selectedConditionCarriers: item.carriers,
                                });
                                console.log(this.state);
                              }}
                            >
                              {item.condition}
                            </Dropdown.Item>
                          );
                        })}
                      </Dropdown.Menu>
                    </Dropdown>
                  </td>

                  {selectedConditionCarriers.map((item, index) => {
                    return (
                      <td>
                        <Label key={index}>{item}</Label>
                      </td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </Table>
      </Container>
    );
  }
}

我想在单击“+”按钮后添加一个新行

其次，当我尝试从下拉菜单中添加一行和 select 时，所有状态都 selected 与图像中可见的一样

Answer 1

push 方法可能会导致副作用的发生。尝试使用 concat 或展开运算符。

  addRow = () => {
    let length = this.state.rows.length
    this.setState({ rows: [...this.state.rows, `row ${length}`] });
  };

在 table 中添加新行并为每个下拉按钮设置单独的状态

Adding new row in a table and have separate state for each drop-down button

select

row

drop-down-menu

reactjs