reactjs - 我正在尝试在我的下拉菜单中获取属性的值以做出反应

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

您通常要做的是传递一个 value 道具（这就是 e.target.value 未定义的原因，因为您没有传递任何值）。

IE：

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