reactjs - 在 React js 中获取控制台中的下拉项

Question

我需要获取单击的下拉项并使用 React js 将其记录在控制台中。

代码：

<div onClick={this.handleSearchBtn} className="dropdown-menu">
  <a className="search-item dropdown-item" href="#" >Authors</a>
  <a className="search-item dropdown-item" href="#">Article Title</a>
  <a className="search-item dropdown-item" href="#">PMID</a>
  <a className="search-item dropdown-item" href="#">Mesh Terms</a>
</div>

标签： reactjsdrop-down-menubootstrap-4

Answer 1

据我了解，你可以做这样的事情

class Anchor extends React.Component {
  state = {
    selected: ''
  }

  handleSearchBtn = (event) => {
    if (event.target.className.indexOf("search-item") !== -1) {
      this.setState({ selected: event.target.text });
    }
  };
  
  render() {
    return (
      <div onClick={this.handleSearchBtn} className="dropdown-menu">
        selected: {this.state.selected}
        <a className="search-item dropdown-item" href="#">
          Authors
        </a>
        <a className="search-item dropdown-item" href="#">
          Article Title
        </a>
        <a className="search-item dropdown-item" href="#">
          PMID
        </a>
        <a className="search-item dropdown-item" href="#">
          Mesh Terms
        </a>
      </div>
    );
  }
}

ReactDOM.render(<Anchor />, document.getElementById("root"));

这是演示

希望能帮助到你 ：）