我正在尝试在 react 的下拉菜单中获取该属性的值

Question

我正在尝试console.log我选择的下拉项的值。我已经尝试了e.target.value和data.value. e.target.value不返回任何内容，data.value返回undefined。

<DropdownItem
    onClick={(e, data) => {
        // this.setState({ choice: this.props.size });
        // value.addChoices(this.state.choice);
        console.log(data.value);
    }}
    className="bg-info"
>
    {this.props.size}
</DropdownItem>

Answer 1

这将

在DropdownItem按钮内为您提供文本值

<DropdownItem
  onClick={e => {
    // this.setState({ choice: this.props.size });
    // value.addChoices(this.state.choice);
    console.log(e.target.innerText);
  }}
  className="bg-info"
>
  {this.props.size}
</DropdownItem>

Answer 2

你通常要做的是传递一个值属性(这就是为什么 e.target.value 是未定义的，因为你没有传递任何值(。

即：

        <DropdownMenu>
          <DropdownItem value='one' onClick={(e) => console.log(e.target.value)}>Foo Action One</DropdownItem>
        </DropdownMenu>

完整示例代码(更改 reactstrap 示例组件(：

import React from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
export default class DropdownTest extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      dropdownOpen: false
    };
  }
  toggle() {
    this.setState(prevState => ({
      dropdownOpen: !prevState.dropdownOpen
    }));
  }
  handleClick = (e) => {
    console.log(e.target.value);
  }
  render() {
    return (
      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
        <DropdownToggle caret>
          Dropdown
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem value='one' onClick={this.handleClick}>Foo Action One</DropdownItem>
          <DropdownItem value='two' onClick={this.handleClick}>Bar Action Two</DropdownItem>
          <DropdownItem value='three' onClick={this.handleClick}>Quo Action Three</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    );
  }
}