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

Question

如何创建一个只选择元素为真的条件？我有一个条件可以更改菜单的事件状态，如果元素本身为真，我只想更改它。现在，因为有一个 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);
    }

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

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}

我认为您必须在我的“corriente”条件中添加一些内容，但我不知道该怎么做。非常感谢

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
  />