如果选择了选项，切换一个元素的 Class

Question

我需要在 display:block 和 display:none 之间切换类，仅当单击 select 选项的第三项时。这就是我所拥有的：

import React, { Component, useState, useEffect } from 'react'
import styles from '../styles/Home.module.css'

class Formulario extends Component {

    constructor(props) {
        super(props);
        this.toggleClass = this.toggleClass.bind(this)
        this.state = {
            active: false,
        };
    }

    toggleClass(event) {
        event.preventDefault();
        const { value } = event.target;
        if (value === 'a3') {
            const currentState = this.state.active;
            this.setState({ active: !currentState });
        }
    };

    render(){              
        return(
            <></div><div className="form-group">
                    <label className="col-md-4 control-label">First select</label>
                    <div className="col-md-4 selectContainer mx-auto">
                        <div className="input-group">
                            <span className="input-group-addon"><i className="glyphicon glyphicon-list"></i></span>
                            <select name="department" onClick={this.toggleClass} id="department" className="form-control selectpicker">
                                <option>Seleccionar sector</option>
                                <option value="a1">A1</option>
                                <option value="a2">A2</option>
                                <option value="a3">A3</option>
                            </select>
                        </div>
                    </div>
                </div><div className={this.state.active ? `${styles.none} form-group area` : `${styles.block} form-group area`}>
                    <label className="col-md-4 control-label">Another Input</label>
                    <div className="col-md-4 selectContainer mx-auto">
                        <div className="input-group">
                            <span className="input-group-addon"><i className="glyphicon glyphicon-list"></i></span>
                            <input name="organismoagn" placeholder="Área" className="form-control"  type="text" />
                        </div>
                    </div>
                </div></>
        )
    
    }
}

export default Formulario;

尝试在 A3 项目中使用 onChange 但没有执行任何操作，使用 toggleClass 我已经设置了一个条件但给了我错误。也尝试使用 vanillajs，但不适用于 react/nextjs.

如果 selected 了 a3，那么最好的实现方式是什么，然后显示下面的表单组？提前致谢！

更新：

我设法用 onClick 事件解决了它：我就是这样做的！

只需使用 if else 语句将 else 中的状态切换为 false，这样我就可以让它工作了！！！非常感谢您的帮助！ onChange 也对我有用！在我试过之后。

toggleClass(event) {
    event.preventDefault();
    const { value } = event.target;
    if (value === 'a3') {
        const currentState = this.state = {
            active: true,
        }
        this.setState({ active: !currentState });
    } else {
        const currentState = this.state = {
            active: false,
        }
        this.setState({ active: currentState });
    } 
};

Answer 1

您的 select 应该处理 onChange 而不是 onClick

<select name="department" onChange={this.toggleClass} id="department" className="form-control selectpicker">
     <option>Seleccionar sector</option>
     <option value="a1">A1</option>
     <option value="a2">A2</option>
     <option value="a3">A3</option>
</select>

然后相应地更新您的toggleClass

toggleClass(event) {
   if (event.target.value === 'a3') {
      const currentState = this.state.active;
      this.setState({ active: !currentState });
   }
};

您也可以使用 prevState 来避免异步状态

toggleClass(event) {
   if (event.target.value === 'a3') {
      this.setState((prevState) => ({ ...prevState, active: !prevState.active }));
   }
};

Answer 2

你好吗？

您可以使用一些条件渲染而不是 class...它会是这样的（抱歉，如果我弄乱了您的代码，这只是一个示例）。

                    <div className="col-md-4 selectContainer mx-auto">
                    <div className="input-group">
                        <span className="input-group-addon"><i className="glyphicon glyphicon-list"></i></span>
                        <select name="department" onClick={this.toggleClass} id="department" className="form-control selectpicker">
                            <option>Seleccionar sector</option>
                            <option value="a1">A1</option>
                            <option value="a2">A2</option>
                            <option value="a3">A3</option>
                        </select>
                    </div>
                </div>
               {!!this.state.active &&
                 <form inside>
                 </form inside>
               }

如果选择了选项，切换一个元素的 Class

Toggle Class of one element if selected option

reactjs

next.js