如何从反应的下拉列表中获取价值？答案

【问题标题】：how to get value from dropdown list in react?如何从反应的下拉列表中获取价值？
【发布时间】：2020-10-01 14:08:57
【问题描述】：

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;

我想要的只是当用户选择任何链接（例如链接 1,2 或 3）时，我只想获得如此简单的值。但我得到的只是未定义的。有什么建议吗？？

【问题讨论】：

重复？ stackoverflow.com/questions/47850489/…
这不是下拉问题，这实际上是关于事件传播

标签： javascript reactjs

【解决方案1】：

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

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;

【讨论】：

我更改了我的消息。请您现在再检查一下吗
我不想为我的下拉列表使用选择属性。我想使用 div

【解决方案2】：

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

onClick={this.getLink}

这将自动将事件传递给您的函数，因此 (e) 将被定义。这相当于做：

onClick={(e) => this.getLink(e)}

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

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

};

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

你可以这样做。

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;

你可以试试codesandbox中的demo

https://codesandbox.io/s/gettingthevalue-yeqoi

【讨论】：

@DiwanshuTyagi 没问题