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.

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

can you help me ?

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

回答1:

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

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

来源：https://stackoverflow.com/questions/58346391/reactjs-drop-down-menu-in-table-duplicating-itself