表中的reactJS下拉菜单 [英] reactJS drop-down menu in table, duplicating itself

问题描述

我在表格上使用下拉菜单。我可以获得注册号。
但是无论打开哪个记录，菜单都会打开，直到记录数量。

I am using dropdown on table. I can get the registration number. But no matter which record is opened, the menu opens up to the number of records.

将记录数量添加到菜单中。

Adding the number of records up to the menu.

虽然有4个菜单，但输入项的数量已经增加
我正在尝试，但无法解决问题

Although there are 4 menus, the number of entries is up I'm trying but I couldn't fix the problem

您能帮我吗？

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

推荐答案

每个下拉列表都与 this.state.table_dropdownOpen 绑定，因此，如果一个打开，则它们都是打开的。为了使它起作用，您需要一个状态变量来保存所有打开的值。我会为此使用Map：

Every dropdown is tied to this.state.table_dropdownOpen, so if one is open, they are all open. In order for this to work you need a state variable that holds all of the open values. I'd use a Map for this:

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可能不正确，但是您会明白的。

Then in your onClick you'll eventually have something like (it's been a while since I've used class components, so setState may not be right, but you'll get the gist.

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

这篇关于表中的reactJS下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！