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

Question

我正在尝试 console.log 我选择的下拉项的值。我试过 e.target.value 和 data.value。 e.target.value returns 什么都没有 data.value returns 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>
    );
  }
}