reactjs - 表格中的reactJS下拉菜单，复制自身

问题描述

我在桌子上使用下拉菜单。我可以得到注册号。但无论打开哪条记录，菜单打开的记录数最多。

将记录数添加到菜单中。

虽然有 4 个菜单，但条目数量增加了我正在尝试但我无法解决问题

你能帮助我吗？

    this.state = {
      table_dropdownOpen: false, //modalform açık mı kapalı mı ?
    };
    this.table_dropdownToggle = this.table_dropdownToggle.bind(this);
    table_dropdownToggle ()  {
       this.setState(prevState => ({
       table_dropdownOpen: !prevState.table_dropdownOpen,
      }));
    };
 render() {
    const { isLoaded, items } = this.state;
    if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
          <div className={"animated fadeIn container-fluid"}>
            <Row>
              <Col>
                <Card>
                  <CardHeader>
                    <i className="fa fa-align-justify" /> Customer Debt
                  </CardHeader>
                  <CardBody>
                    <Table hover bordered striped responsive size="sm">
                      <thead>
                      <tr>
                        <th width={"10"} />
                        <th width={"15"}>No</th>
                        <th style={{ display: "none" }}>User</th>
                        <th style={{ display: "none" }}>Key</th>
                        <th style={{ display: "none" }}>CreatedUserKey</th>
                        <th width={"40"}>Total debt</th>
                        <th width={"40"}>Received amount</th>
                        <th scope={"row"}>Description</th>
                        <th width={"20"}>Payment Date</th>
                      </tr>
                      </thead>

                      <tbody>

                      {items.map(item => {
                        return (
                            <tr key={item.id}>

                              <td >
                                <ButtonDropdown
                                    isOpen={ this.state.table_dropdownOpen }
                                    toggle={  this.table_dropdownToggle }
                                    onClick={ () => console.log(item.id) } >
                                  <DropdownToggle caret >
                                    Process
                                  </DropdownToggle>
                                      <DropdownMenu>
                                    <DropdownItem >New record</DropdownItem>
                                    <DropdownItem >Print all</DropdownItem>
                                    <DropdownItem>Another Action</DropdownItem>
                                    <DropdownItem divider />
                                    <DropdownItem>Another Action</DropdownItem>
                                  </DropdownMenu>
                                </ButtonDropdown>
                              </td>
                              <td>{item.id}</td>
                              <td style={{ display: "none" }}>{item.user}</td>
                              <td style={{ display: "none" }}>{item.debtKey}</td>
                              <td style={{ display: "none" }}> {item.createduserKey} </td>
                              <td>{item.totalDebt}</td>
                              <td>{item.receivedAmount}</td>
                              <td>{item.description}</td>
                              <td>{new Date(item.paymentDate).toLocaleString()}</td>
                            </tr>
                        )
                      })}
                      </tbody>
                    </Table>
                  </CardBody>
                </Card>
              </Col>
            </Row>
          </div>
      );
    }
  }
}

标签： reactjsbuttondrop-down-menu

每个下拉列表都绑定到this.state.table_dropdownOpen，所以如果一个是打开的，它们都是打开的。为了使其工作，您需要一个包含所有打开值的状态变量。我会为此使用地图：

this.state = {
      tableDropDownMap: new Map()
};
...
//component did mount, initialize the map
let updatedMap = new Map()
items.forEach(item => updatedMap.set(item.id, false)
...
<ButtonDropdown
  isOpen={ this.state.tableDropDownMap.get(item.id) }
  onClick={ () => console.log(item.id) } >

然后在你的 onClick 中你最终会得到类似的东西（我已经有一段时间没有使用类组件了，所以 setState 可能不正确，但你会明白要点的。

onClick={() => {
  let updatedMap = new Map(tableDropDownMap)
  updatedMap.set(item.id, !updatedMap.get(item.id))
  this.setState({tableDropDownMap: updatedMap})

reactjs - 表格中的reactJS下拉菜单，复制自身

问题描述

解决方案

推荐阅读