Javascript 如何在单击时显示/隐藏具有特定类的元素？

我对React和ES6相当陌生，我正在尝试开发功能，以便在单击按钮（.featureBtn）时，隐藏一些具有特定类的元素（all.featureBtn元素），并显示另一个组件（附件）

这可以使用state和三元语句来实现吗？如果可以，将如何实现

请看下面我的代码

class ProductView extends React.Component {

  static contextType = ChoicesContext;

  constructor(props) {
    super(props);

    this.forwardSequence = this.forwardSequence.bind(this);
    this.reverseSequence = this.reverseSequence.bind(this);
  }

  static sequenceImages(folder, filename, type) {
    let images = [];
    for (let i = 0; i < 51; i++) {
      images.push(<img src={require(`../images/sequences/${folder}/${filename}_000${i}.jpg`)} alt="" className={`${type} sequenceImage`} />);
    }
    return images;
  }

  async sleep(ms) {
    return new Promise(r => setTimeout(r, ms))
  }

  async forwardSequence(sequence, effect) {
    Array.prototype.reduce.call
      ( sequence
      , (r, img) => r.then(_ => this.sleep(50)).then(_ => effect(img))
      , Promise.resolve()
      )
  }

  async reverseSequence(sequence, effect) {
    Array.prototype.reduceRight.call
      ( sequence
      , (r, img) => r.then(_ => this.sleep(50)).then(_ => effect(img))
      , Promise.resolve()
      )
  }

  render() {
    const etseq = document.getElementsByClassName("exploreTech");
    const uiseq = document.getElementsByClassName("userInterface");

    const { choices } = this.context;
    const CurrentProduct = ProductData.filter(x => x.name === choices.productSelected);

    return (
      <>

        <div className="productInteractive wrapper">
          {CurrentProduct.map((item, i) => (
            <main className={item.slug}>

              <div key={i} className="imageSequence">
                <img src={require(`../images/sequences/${item.static_img}`)} alt="" className="staticImage" />
                {ProductView.sequenceImages(item.explore_tech_img_folder, item.explore_tech_filename, "exploreTech")}
                {ProductView.sequenceImages(item.user_interface_img_folder, item.user_interface_filename, "userInterface")}
              </div>

             {/* When one of the two buttons below are clicked, they should both hide (presumably using the featureBtn class), and the <Accessories /> component should become visible. */}

              <button
                onClick={() => this.forwardSequence(etseq, img => img.style.opacity = 1)}
                className="btn featureBtn userInterfaceBtn"
              >User Interface</button>

              <button
                onClick={() => this.forwardSequence(uiseq, img => img.style.opacity = 1)}
                className="btn-reverse featureBtn exploreTechnologiesBtn"
              >Explore Technologies</button>

           <Accessories />

            </main>
          ))}
        </div>
      </>
    );
  }
}
export default ProductView;

类ProductView扩展了React.Component{
静态上下文类型=ChoiceContext；
建造师（道具）{
超级（道具）；
this.forwardSequence=this.forwardSequence.bind（this）；
this.reverseSequence=this.reverseSequence.bind（this）；
}
静态序列图像（文件夹、文件名、类型）{
让图像=[]；
for（设i=0；i<51；i++）{
image.push（）；
}
返回图像；
}
异步睡眠（ms）{
返回新承诺（r=>setTimeout（r，ms））
}
异步转发序列（序列、效果）{
Array.prototype.reduce.call
（顺序）
，（r，img）=>r.then（=>this.sleep（50））.then（=>effect（img））
，Promise.resolve（）
)
}
异步反向顺序（顺序、效果）{
Array.prototype.reduceRight.call
（顺序）
，（r，img）=>r.then（=>this.sleep（50））.then（=>effect（img））
，Promise.resolve（）
)
}
render（）{
const etseq=document.getElementsByClassName（“exploreTech”）；
const uiseq=document.getElementsByClassName（“用户界面”）；
const{choices}=this.context；
const CurrentProduct=ProductData.filter（x=>x.name==choices.productSelected）；
返回(
{CurrentProduct.map（（项，i）=>(
{ProductView.sequenceImages（item.explore\u tech\u img\u文件夹，item.explore\u tech\u文件名，“exploreTech”）}
{ProductView.sequenceImages（item.user\u interface\u img\u文件夹，item.user\u interface\u文件名，“userInterface”）}
{/*单击下面两个按钮中的一个时，它们都应该隐藏（可能使用featureBtn类），组件应该可见。*/}
this.forwardSequence（etseq，img=>img.style.opacity=1）}
className=“btn功能btn用户接口EBTN”
>用户界面
this.forwardSequence（uiseq，img=>img.style.opacity=1）}
className=“btn反向功能btn探索技术btn”
>探索技术
))}
);
}
}
导出默认产品视图；

我将通过添加一个状态变量来解决这个问题。我们称之为show。单击按钮时，可以将“显示”更新为“隐藏”。使用此变量可以有条件地更改要隐藏的按钮的类名

可以使用将条件类名添加到要隐藏的按钮

并对附件使用三元运算符。此状态变量可用于显示或隐藏附件

{ !this.state.show && <Accessories/>}

{！this.state.show&}

使用三元运算符和一个状态变量，单击“更改状态值”

---

{this.state.stateVariable？Component:null}

您可以编写一个函数，首先按类名获取要删除的元素，获取按钮，并在单击时切换显示

参见代码

类ProductView扩展了React.Component{
静态上下文类型=ChoiceContext；
建造师（道具）{
超级（道具）；
this.forwardSequence=this.forwardSequence.bind（this）；
this.reverseSequence=this.reverseSequence.bind（this）；
}
静态序列图像（文件夹、文件名、类型）{
让图像=[]；
for（设i=0；i<51；i++）{
image.push（）；
}
返回图像；
}
异步睡眠（ms）{
返回新承诺（r=>setTimeout（r，ms））
}
异步转发序列（序列、效果）{
Array.prototype.reduce.call
（顺序）
，（r，img）=>r.then（=>this.sleep（50））.then（=>effect（img））
，Promise.resolve（）
)
}
异步反向顺序（顺序、效果）{
Array.prototype.reduceRight.call
（顺序）
，（r，img）=>r.then（=>this.sleep（50））.then（=>effect（img））
，Promise.resolve（）
)
}
//用于隐藏具有classname.featureBtn的元素的函数。
切换显示（）{
const elementsToBeRemoved=document.getElementsByClassName（'featureBtn'）；
const button=document.getElementsByTagName（'button'）；//如果它是一个特定的按钮，请为该按钮指定一个ID并使用getElementById
如果（元素已移动）{
elementsToBeRemoved.styles.display（'none'）
//插入要显示的其他零部件
}否则{
elementsToBeRemoved.styles.display（'inline'）
//隐藏其他组件
}
//将此函数附加到onClick属性上，然后查看发生了什么。
}
render（）{
const etseq=document.getElementsByClassName（“exploreTech”）；
const uiseq=document.getElementsByClassName（“用户界面”）；
const{choices}=this.context；
const CurrentProduct=ProductData.filter（x=>x.name==choices.productSelected）；
返回(
{CurrentProduct.map（（项，i）=>(
{ProductView.sequenceImages（item.explore\u tech\u img\u文件夹，item.explore\u tech\u文件名，“exploreTech”）}
{ProductView.sequenceImages（item.user\u interface\u img\u文件夹，item.user\u interface\u文件名，“userInterface”）}
{/*单击下面两个按钮中的一个时，它们都应该隐藏（可能使用featureBtn类），组件应该可见。*/}
this.forwardSequence（etseq，img=>img.style.opacity=1）}
className=“btn功能btn用户接口EBTN”
>用户界面
this.forwardSequence（uiseq，img=>img.style.opacity=1）}
className=“btn反向fe
if(this.state.showFirst) {
  this.showFirst();
} else {
  this.showSecond();
}