ReactStrap：访问所选 dropDownItem 的 id

Posted 2023-03-23

【中文标题】ReactStrap：访问所选 dropDownItem 的 id

【英文标题】：ReactStrap: Accessing the id of the selected dropDownItem

【发布时间】：2020-06-11 13:44:57

【问题描述】：

我有这个 dropdownList：

  <Dropdown
                  isOpen=this.state.dropdownOpen[3]
                  toggle=() => 
                    this.toggle(3);
                  
                >
                  <DropdownToggle className="my-dropdown" caret>
                    " "
                    this.state.dropDownValue
                  </DropdownToggle>
                  <DropdownMenu>
                    <DropdownItem productid="0">
                      " "
                      <div onClick=this.changeValue>
                        PURE BLACK MAT BLUETOOTH
                      </div>
                    </DropdownItem>
                    <DropdownItem productid="1">
                      " "
                      <div onClick=this.changeValue>
                        PLAYER BLACK MAT FILAIRE
                      </div>
                    </DropdownItem>
                    <DropdownItem productid="2">
                      " "
                      <div onClick=this.changeValue>
                        PURE PLUS BLACK MAT MEMORY 128 G
                      </div>
                    </DropdownItem>
                    <DropdownItem productid="3">
                      " "
                      <div onClick=this.changeValue>
                        PURE LIMITED CHROME GOLD MEMORY 256G
                      </div>
                    </DropdownItem>
                    <DropdownItem productid="4">
                      " "
                      <div onClick=this.changeValue>
                        PURE GOLD MAT BLUETOOTH
                      </div>
                    </DropdownItem>
                    <DropdownItem productid="5">
                      " "
                      <div onClick=this.changeValue>
                        PLAYER GOLD MAT FILAIRE
                      </div>
                    </DropdownItem>
                    <DropdownItem productid="6">
                      " "
                      <div onClick=this.changeValue>
                        PURE PLUS GOLD MAT MEMORY 128 G
                      </div>
                    </DropdownItem>
                    <DropdownItem productid="7">
                      " "
                      <div onClick=this.changeValue>GAME ONE WHITE</div>
                    </DropdownItem>
                  </DropdownMenu>
                </Dropdown>

还有这个onClickListener：

 changeValue(e) 
    console.log(
      "The selected productId is: ",
      e.currentTarget.getAttribute("productid")
    );
    //The selected productId is:  null
    this.setState(
      dropDownValue: e.currentTarget.textContent
    );
  

我正在尝试访问所选 DropdownItem 的 productid。但是，由于某种原因，结果始终为空：

控制台.log( "选择的productId是：", e.currentTarget.getAttribute("productid") ); //选择的productId为：null

知道我做错了什么吗？

【问题讨论】：

为什么不将 productId 作为参数传递给 changeValue 处理程序？

@Amir-Mousavi 这是我在 SO 上找到的方法，它应该可以工作。我会尝试你的建议。谢谢。

@Amir-Mousavi 在这里查看答案：***.com/questions/44364502/…

DropdownItem 是一个 react 组件 productid 角色作为该 reactStrap 组件的道具，而不是 html 属性，您无法通过 e.currentTarget.getAttribute 访问它

您发布的示例从 HTML div 元素而不是 React 组件获取 textContent 的属性

【参考方案1】：

我已通过在 div 中传递属性 productid 来解决此问题：

 <DropdownItem>
                      " "
                      <div productid="0" onClick=this.changeValue>
                        PURE BLACK MAT BLUETOOTH
                      </div>
                    </DropdownItem>