Question

如何使仅选择元素为true的条件？我有一个条件可以更改菜单的活动状态，如果元素本身为true，则只希望更改它。现在，由于存在一个真正的元素，因此将条件添加到所有元素。我只需要在元素为true时添加类，对其他未单击的元素保持false。

    submenuClick(padre) {
        const { padreState } = this.state;
        const corriente = { ...padreState };
        const toggle = !corriente[padre];
        this.toggle(corriente);
        corriente[padre] = toggle;

        this.setState({
            padreState: corriente,            
        });
        if(corriente[padre] === true){
            this.setState({
                addClass: !this.state.addClass           
            });
         }
        console.log(corriente);
    }

编辑并添加菜单类的代码，在其中将类添加到所有元素

class Menu extends Component {
    render() {
        let activeClass = ['desplegable'];
        if(this.props.addClass) {
            activeClass.push('active');
        }
        return (
        <li key={this.props.id} className="list__item">
            <button
                title={this.props.menu}
                id={'mn-' + this.props.menu}
                className={activeClass.join(' ')}
                onClick={this.props.submenuClick}
            >
            <Icon icon="auriculares" className="ico-auriculares" />
                {this.props.menu}
            </button>
            {this.props.abrirSubmenu ? (
                <div id="sb-crm" className="submenu">
                    {this.props.submenu.map(hijo => (
                        <h3 className="nav--title">
                            <Icon icon="descargar" className="ico-descargar" />
                            {hijo}
                        </h3>
                    ))}
                    <ul className="list">
                        <li className="list__item">
                            {this.props.descripcion.map(tercerNivel => (
                            <a href={this.props.url} title={this.props.descripcion}>
                                {tercerNivel}
                            </a>
                            ))}
                        </li>
                    </ul>
                    <div className="content-bnt">
                        <button id="desplegar" className="btn btn--rounded" onClick={this.props.desplegarClick}>
                            <Icon icon="flecha" className="ico-flecha"/>
                            <Icon icon="flecha" className="ico-flecha"/>
                        </button>
                    </div>
                </div>
            ) : null}
        </li>
        );
    }
}

如果我单击第二个元素（padre-44），这是我从控制台日志中得到的答复：

{padre-114: false, padre-44: true, padre-50: false}

我认为您必须在“正确”状态下添加一些内容，但是我不知道该怎么做。非常感谢

Answer 1

传递当前this.state.padreState['padre-' + datos.id]的状态值，该值可以为true或false。

Menu
  key={datos.id}
  menu={datos.menu}
  submenu={datos.submenu}
  descripcion={datos.descripcion}
  url={datos.url}
  desplegarClick = {this.desplegarClick} 
  submenuClick={() => this.submenuClick('padre-' + datos.id)}
  abrirSubmenu={this.state.padreState['padre-' + datos.id]}
  addClass={this.state.padreState['padre-' + datos.id]} // here add current state of  padre
  />

Answer 2

首先，您不需要使用===比较来检查是否为true。仅当（eleVal）足够时，即条件才有效（仅在eleVal为true时转到“ if”块），否则将进入“ else”块。如果您只想对选定的元素执行代码，则可以使用“ onclick”或等效的触发器函数将其纠正，而不是全部编写，只需检查选定元素的“ true / false”值即可

如何使仅选择元素为true的条件-Javascript

2 个答案: