Javascript 如何从react中的下拉列表中获取值？ 类导航栏扩展组件{ 状态={}； getLink=（e）=>{ const select=document.getElementById（“drpdwn”）； console.log（选择.value）； }; render（）{ 返回( this.getLink（）} className=“下拉列表” > 下拉列表 ); } } 导出默认导航栏；

我想要的是，每当用户选择任何链接，如链接1、2或3，我只想得到这样简单的值。但我得到的只是未定义的。任何建议？？？

首先，删除onClick中的匿名函数，如下所示：

onClick={this.getLink}

这将自动将事件传递到函数中，因此将定义（e）。这相当于：

onClick={（e）=>this.getLink（e）}

完成此操作后，必须在函数中恢复事件中的值

class Navbar extends Component {
  state = {};

  getLink = (e) => {
    const select = document.getElementById("drpdwn");
    console.log(select.value);
  };

  render() {
    return (
      <>
        <div className="container">
          <nav className="navbar navbar-dark bg-primary">
            <div
              id="drpdwn"
              onClick={() => this.getLink()}
              className="dropdown"
            >
              <span className="dropbtn">Dropdown</span>
              <div className="dropdown-content">
                <a value="link1" href="#">
                  Link 1
                </a>
                <a value="link2" href="#">
                  Link 2
                </a>
                <a value="link3" href="#">
                  Link 3
                </a>
              </div>
            </div>
          </nav>
        </div>
      </>
    );
  }
}

export default Navbar;

---

})

您可以像这样更改代码并使用标记，而不是然后使用标记

getLink = (e) => {
  const value = e.target.value;
  console.log(value);

import React，{Component}来自“React”；
类导航栏扩展组件{
状态={}；
getLink=（e）=>{
const changeValue=e.target.value
console.log（changeValue）
};
render（）{
返回(
this.getLink（e）}
className=“下拉列表”
>            
链接1
链接2
链接3
);
}
}
导出默认导航栏；

我注意到您想要创建一个带有下拉列表的导航栏

import React, { Component } from "react";

class Navbar extends Component {
  state = {};

  getLink = (e) => {
   const changeValue = e.target.value
   console.log(changeValue )
  };

  render() {
    return (
      <>
        <div className="container">
          <nav className="navbar navbar-dark bg-primary">
            <select
              id="drpdwn"
              onChange={(e) => this.getLink(e)}
              className="dropdown"
            >            
                <option value="link1" href="#">
                  Link 1
                </option>
                <option value="link2" href="#">
                  Link 2
                </option>
                <option value="link3" href="#">
                  Link 3
                </option>
            </select>
          </nav>
        </div>
      </>
    );
  }
}

export default Navbar;

类导航栏扩展组件{
render（）{
返回(
{
e、 预防默认值（）；
//e.target是您在此div中单击的目标
console.log（如target）；
}}
className=“下拉列表”
>
下拉列表
);
}
}

这就是你可以做到的

class Navbar extends Component {
  render() {
    return (
      <>
        <div className="container">
          <nav className="navbar navbar-dark bg-primary">
            <div
              id="drpdwn"
              onClickCapture={(e) => {
                e.preventDefault();

                // e.target which is the target you click within this div
                console.log(e.target);
              }}
              className="dropdown"
            >
              <span className="dropbtn">Dropdown</span>
              <div className="dropdown-content">
                <a href="/">
                  Link 1
                </a>
                <a href="/">
                  Link 2
                </a>
                <a href="/">
                  Link 3
                </a>
              </div>
            </div>
          </nav>
        </div>
      </>
    );
  }
}

import React，{Component}来自“React”；
类导航栏扩展组件{
建造师（道具）{
超级（道具）；
this.ref=React.createRef（）；
}
getLink=（{target}）=>{
if（target.tagName.toLowerCase（）=“a”）{
log（target.getAttribute（“值”）；
}
};
render（）{
返回(
下拉列表
);
}
}
导出默认导航栏；

您可以在codesandbox中尝试演示

---

重复？这不是下拉列表问题，这实际上是关于事件的propagation@DiwanshuTyagi没问题，我改了留言。请您现在再次检查，我不想在下拉列表中使用“选择属性”。我想用div

import React, { Component } from "react";

class Navbar extends Component {
  constructor(props) {
    super(props);
    this.ref = React.createRef();
  }

  getLink = ({ target }) => {
    if (target.tagName.toLowerCase() === "a") {
      console.log(target.getAttribute("value"));
    }
  };

  render() {
    return (
      <>
        <div className="container">
          <nav className="navbar navbar-dark bg-primary">
            <div id="drpdwn" onClick={this.getLink} className="dropdown">
              <span className="dropbtn">Dropdown</span>
              <div className="dropdown-content">
                <a value="link1" href="#">
                  Link 1
                </a>
                <a value="link2" href="#">
                  Link 2
                </a>
                <a value="link3" href="#">
                  Link 3
                </a>
              </div>
            </div>
          </nav>
        </div>
      </>
    );
  }
}

export default Navbar;