Question

我正在尝试切换两个不同的下拉菜单，但似乎无法正常工作。新来的反应，可能已经考虑了太久了，这很简单。问题是当我一个切换另一个时也切换了，所以它们都显示出来了。这就是我所拥有的：

import React from "react";
import { Link } from "./component/link";
import styles from "./header.module.css";

class Header extends React.Component {

  constructor(props) {
    super ( props )    
    this.state = {
      show : false
    }
    this.toggleBusiness = this.toggleBusiness.bind(this);
    this.state = {
      show : false
    }
    this.togglePersonal = this.togglePersonal.bind(this);
  }

  toggleBusiness = () => {
    const { show } = this.state;
    this.setState( { show : !show } )
  }

  togglePersonal = () => {
    const { show } = this.state;
    this.setState( { show : !show } )
  }

  render() {
    return (
      <div className={ styles.topNav} >
        <div className="grid">
          <div className="grid-cell">
            <div className={ styles.logoText }>
              Logo
            </div>
          </div>  
          <nav>
            <div className="grid-cell">
              <ul className="list-unstyled">
                <li><Link to={'/design'}>About</Link></li>
                <li><a onClick={this.toggleBusiness}>Business</a></li>                  
                <li><a onClick={this.toggleBusiness}>Personal</a></li>
                <li><Link to={'/posts'}>Blog</Link></li>
                <li><Link to={'/contact'}>Contact</Link></li>
                <li className={styles.menuButton}><a className="button button-secondary" href="tel:2252931086">File a Claim</a></li>
                <li className={styles.menuButton}><a className="button" href="/">Get Insurance</a></li>
              </ul>              
            </div> 
          </nav>
        </div>
        { this.state.show && <BusinessDropdown /> }
        { this.state.show && <PersonalDropdown /> }
      </div>
    )}
}

class BusinessDropdown extends React.Component {
  render () {
    return (
      <div className="dropdown">BusinessTest</div>
    )
  }
}
class PersonalDropdown extends React.Component {
  render () {
    return (
      <div className="dropdown">PersonalTest</div>
    )
  }
}

export default Header;

因此，基本上，我希望它在单击“业务”时切换“业务”下拉菜单，在按“个人”时切换“个人”下拉菜单。另外，如果您有比此方法更有效的方法，请告诉我！

Answer 1

您同时将this.state.show用于企业和个人。添加第二个状态变量，例如showBusiness和showPersonal 应该可以解决您的问题。

您也可以/应该只用一次声明您的状态

this.state = {
  showBusiness: false,
  showPersonal: false
};

Answer 2

在构造函数中，您将this.state.show设置为错误的 2次，将其分为两个单独的变量，也许是this.state.showBuisness和this.state.showPersonal？

Answer 3

将您的toggleBusiness和togglePersonal更改为此：

toggleBusiness = () => {
  const { show } = this.state;
  this.setState({ show: show === "business" ? null : "business" });
};

togglePersonal = () => {
  const { show } = this.state;
  this.setState({ show: show === "personal" ? null : "personal" });
};

然后在条件渲染中执行以下操作：

{this.state.show === "business" && <BusinessDropdown />}
{this.state.show === "personal" && <PersonalDropdown />}

...在您的链接中，您也拥有此：

<li><a onClick={this.toggleBusiness}>Business</a></li>                  
<li><a onClick={this.toggleBusiness}>Personal</a></li>

您应该在哪里：

<li><a onClick={this.toggleBusiness}>Business</a></li>                  
<li><a onClick={this.togglePersonal}>Personal</a></li>

编辑：：我意识到这与您要求的不完全相同-当打开个人电源后，这会关闭业务。我个人认为，考虑到您要打开新的下拉菜单的事实，这种方法实际上更适合，您可能希望关闭另一个菜单。

Answer 4

我的方法是这样的。

1。设置初始状态

constructor(props){
  super(props);
  this.state={
    business: false,
    personal: false
  }
}

2。创建一个功能来更新两个状态。

handleClick = (e) => {
  this.setState(prevState => {
    [e.target.id]: !prevState[e.target.id]
  } 
}

3。将功能添加到onclick和ID

<button id="personal" onClick={this.handleClick}>SHOW PERSONAL</button>

分别切换两件事React构造函数

4 个答案: