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

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

2 个答案: