Question

尝试让我的下拉列表允许我选择其中一个选项，但它没有发生。如果我需要更多此功能，则无法找到任何进一步的文档。不知道为什么我不能选择。我的代码：

import React from 'react';
import {
  Media,
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button,
} from 'reactstrap';
import PropTypes from 'prop-types';

class UserPreview extends React.Component {
  toggle = (user) => this.setState({DropdownOpen: !this.state.DropdownOpen});

  state = {DropdownOpen: false}

  render() {
    let { user } = this.props;
    return (
      <tr className="user">
        <td>
          <Media>
            <img
              alt={`${user.name} avatar`}
              className="avatar d-flex mr-3"
              src={user.url} />
            <Media body>{user.name}</Media>
          </Media>
        </td>
        <td>
          <Dropdown isOpen={this.state.DropdownOpen} toggle={this.toggle.bind(this, this.props.user)}>
            <DropdownToggle caret>
              Admin
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem>Read</DropdownItem>
              <DropdownItem>Write</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </td>
        <td>
          <Button color="danger">Delete</Button>
        </td>
      </tr>
    )
  }
}

UserPreview.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string,
    // TODO: add an url proptype.
    url: PropTypes.string,
  }).isRequired,
};

export default UserPreview;

与使用选项选择不同，如下所示在下拉菜单中使用了什么？

更新代码：

import React from 'react';
import {
  Media,
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button,
} from 'reactstrap';
import PropTypes from 'prop-types';

class UserPreview extends React.Component {
  toggle = (user) => this.setState({DropdownOpen: !this.state.DropdownOpen});

  state = {DropdownOpen: false}

  handleChange(e) {
    this.Dropdown({
      [e.target.name]: e.target.value
    });
  }

  onChange = (e) => {
    this.setState({item: e.target.value});
  }

  render() {
    let { user } = this.props;
    return (
      <tr className="user">
        <td>
          <Media>
            <img
              alt={`${user.name} avatar`}
              className="avatar d-flex mr-3"
              src={user.url} />
            <Media body>{user.name}</Media>
          </Media>
        </td>
        <td>
          <Dropdown isOpen={this.state.DropdownOpen} toggle={this.toggle.bind(this)}>
            <DropdownToggle caret>
              Admin
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem>Read</DropdownItem>
              <DropdownItem>Write</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </td>
        <td>
          <Button color="danger">Delete</Button>
        </td>
      </tr>
    )
  }
}

UserPreview.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string,
    // TODO: add an url proptype.
    url: PropTypes.string,
  }).isRequired,
};

export default UserPreview;

Answer 1

可能是切换？看起来你正在宣布绑定错误。

以下是使用toggle={this.toggle.bind(this)}

声明下拉菜单操作的方法

这将在渲染之外，因为它是自己的功能

toggle (e) {
  this.setState (
    toggle: true
  );
}

此外，要保留该值，您需要在更改处理程序中添加e.target.value，因为它是一个需要保存的事件。

反应下拉选择

1 个答案: