Question

无法按我希望的方式运行菜单。基本上，当您单击“业务”或“个人”时，我希望下拉菜单变得可见，这是可行的，但随后我还希望将“向下箭头”更改为X。我已经正确设置了两个类，一个是箭头，另一个是X。

但是，我一直在努力使下拉菜单和arrow-to-x更改都能正常工作。同样，不是100％确定构造此设置的最佳方法。正如您在下面看到的，我试图退出一家公司，看看是否可以使它正常工作，但不能。它通常会像普通菜单一样出现在菜单中，而<DropdownArrowBusiness />不会不在普通菜单之外。感谢您的帮助！

class DropdownArrowBusiness extends React.Component {
  constructor(props) {    
    super(props)
    this.state = {
      condition: false
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    this.setState({
      condition: !this.state.condition
    })
  }
  render() {
    return (
      <li className={ this.state.condition ? "downarrow" : "xSymbol" } onClick={ this.handleClick } ><span className="menuDropdownLink" onClick={this.toggleBusiness}>Business</span></li>
    )
  }
}

class Header extends React.Component {

  constructor(props) {
    super ( props )    
    this.stateBusiness = {
      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 === "business" ? null : "business" });
  };

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

  render() {
    return (
      <div className={ styles.topNav} >
        <div className="grid">
          <div className="grid-cell">
            <div className={ styles.logoText }>
              <Link to={'/'}><img className={styles.logo} src="https://example.com/images/logo.png" alt=""/></Link>
            </div>
          </div>  
          <nav>
            <div className="grid-cell">
              <ul className="list-unstyled">
                <li><Link to={'/design'}>About</Link></li>
                <li className="downarrow"><span className="menuDropdownLink" onClick={this.toggleBusiness}>Business</span></li>
                <li className="downarrow"><span className="menuDropdownLink" onClick={this.togglePersonal}>Personal</span></li>
                <li><Link to={'/posts'}>Blog</Link></li>
                <li><Link to={'/contact'}>Contact</Link></li>
              </ul>              
            </div> 
          </nav>
          <DropdownArrowBusiness />
        </div>
        {this.state.show === "business" && <BusinessDropdown />}
        {this.state.show === "personal" && <PersonalDropdown />}
      </div>
    )}
}

Answer 1

在您的设置中，似乎没有任何东西可以与<DropdownArrowBusiness/>进行通信以更改其总体状态，这就是为什么您没有获得预期效果的原因。

要解决此问题，您可以从父组件prop向下传递<Header/>，以告诉DropdownArrowBusiness导航列表已打开。传承下去，this.state.show

因此，在您的Header组件中执行以下操作：

 <DropdownArrowBusiness show={this.state.show}/>

然后在DropdownArrowBusiness中将返回件修改为此：

<li className={ this.props.show ? "downarrow" : "xSymbol" } onClick={ this.handleClick } ><span className="menuDropdownLink" onClick={this.toggleBusiness}>Business</span></li>

在React中onClick做两件事

1 个答案: