Javascript 制表符设置为“激活”时，将所有“假”变为“流星反应”

我正在努力： 使选项卡处于活动状态并关闭所有其他选项卡。 目前，我只有它的工作，它将关闭和打开一个时间

我一直在想我该怎么做。 我在想，有没有一种方法可以将父组件传递给函数，然后能够访问其所有子组件的className属性？？ 目前我有：

import React from 'react';
import ReactDOM from 'react-dom';


export default class TestContainer extends React.Component{


        setActive(event){
           event.preventDefault();

           //getting id from component
           let isActive = event.target.id;


           if(event.currentTarget.className === "list-group-item text-center active"){
                   event.currentTarget.className = "list-group-item text-center";
           } else if(event.currentTarget.className === "list-group-item text-center") {
                   event.currentTarget.className = "list-group-item text-center active";
           }

        }



        render(){   




         return (                               

                <div className="col-lg-6 col-md-6 col-sm-6 col-xs-6 bhoechie-tab-container    scroll-y">
                        <div className="col-lg-2 col-md-2 col-sm-2 col-xs-2 bhoechie-tab-menu">
                                <div className="list-group">
                                        <a href="#" onClick={this.setActive} id="eyes" className="list-group-item text-center active">
                                                <h4 className="glyphicon glyphicon-eye-close"></h4><br/>1
                                        </a>
                                        <a href="#" onClick={this.setActive} id="hair" className="list-group-item text-center">
                                                <h4 className="glyphicon glyphicon-tint"></h4><br/>2
                                        </a>
                                        <a href="#" onClick={this.setActive} id="mouth" className="list-group-item text-center">
                                                <h4 className="glyphicon glyphicon-minus"></h4><br/>3
                                        </a>
                                        <a href="#" onClick={this.setActive} id="clothing" className="list-group-item text-center">
                                                <h4 className="glyphicon glyphicon-user"></h4><br/>4
                                        </a>
                                        <a href="#" onClick={this.setActive} id="props" className="list-group-item text-center">
                                                <h4 className="glyphicon glyphicon-gift"></h4><br/>5
                                        </a>
                                </div>
                        </div>
)}

从“React”导入React；
从“react dom”导入react dom；
导出默认类TestContainer扩展React.Component{
设置活动（事件）{
event.preventDefault（）；
//从组件获取id
让isActive=event.target.id；
if（event.currentTarget.className==“列表组项目文本中心处于活动状态”）{
event.currentTarget.className=“列表组项目文本中心”；
}else if（event.currentTarget.className==“列表组项目文本中心”）{
event.currentTarget.className=“列表组项目文本中心处于活动状态”；
}
}
render（）{
报税表（
)}

通过尝试在

render（）方法之外更改元素的状态，您正在与React的渲染引擎的优势作斗争。使用组件内部或通过道具/上下文提供的状态（最好是道具），以确定哪个选项卡应在其类名中显示为活动的

响应单击时，请更改状态并让React基于新状态重新渲染组件

对于这里提供的有限示例，我建议将活动元素的ID存储在组件状态的内部

export default class TestContainer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      activeTab: this.props.activeTab || 'eyes'
    };
  }

  setActive(event) {
    this.setState({ activeTab: event.target.id });
  }

  render() {
    const { activeTab } = this.state;
    const tabClassName = "list-group-item text-center";
    const eyesTabClassName = tabClassName + (activeTab === 'eyes' ? ' active' : '');

    ...

              <a href="#" onClick={this.setActive} id="eyes" className={eyesTabClassName}>

    ...

  }
}

导出默认类TestContainer扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
activeTab:this.props.activeTab | | |“眼睛”
};
}
设置活动（事件）{
this.setState（{activeTab:event.target.id}）；
}
render（）{
const{activeTab}=this.state；
const tabClassName=“列表组项目文本中心”；
常量eyesTabClassName=tabClassName+（activeTab=='eyes'？'active'：''；
...
...
}
}

这是一个粗略的、未优化的解决方案，但它应该能让人理解这个想法。当您调用
This.setState
时，React通过将组件标记为需要重新渲染来响应。the
render（）
方法将被自动调用，因此所有JSX都将重新评估和呈现。React将查看它刚刚生成的内容与虚拟DOM中已有的内容之间的差异，并合并到您的更改中

这意味着，无论哪个选项卡以前在其类名中呈现为“active”，都将重新呈现。如果它不再处于活动状态，则呈现代码将不会将活动类连接到该选项卡的类名中。此外，无论哪个类处于活动状态，现在都会将其类名附加为“active”

TL；DR

不要在事件处理程序中操纵DOM。操纵状态并让React通过使用新状态重新呈现来发挥其魔力。
尝试在
呈现（）之外更改元素的状态
method，您正在与React的呈现引擎的优势作斗争。使用组件内部的状态或通过props/context（最好是props）提供的状态来确定哪个选项卡应在其类名中以
active
呈现

响应单击时，请更改状态并让React基于新状态重新渲染组件

对于这里提供的有限示例，我建议将活动元素的ID存储在组件状态的内部

export default class TestContainer extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      activeTab: this.props.activeTab || 'eyes'
    };
  }

  setActive(event) {
    this.setState({ activeTab: event.target.id });
  }

  render() {
    const { activeTab } = this.state;
    const tabClassName = "list-group-item text-center";
    const eyesTabClassName = tabClassName + (activeTab === 'eyes' ? ' active' : '');

    ...

              <a href="#" onClick={this.setActive} id="eyes" className={eyesTabClassName}>

    ...

  }
}

导出默认类TestContainer扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
activeTab:this.props.activeTab | | |“眼睛”
};
}
设置活动（事件）{
this.setState（{activeTab:event.target.id}）；
}
render（）{
const{activeTab}=this.state；
const tabClassName=“列表组项目文本中心”；
常量eyesTabClassName=tabClassName+（activeTab=='eyes'？'active'：''；
...
...
}
}

这是一个粗略的、未优化的解决方案，但它应该能让人理解这个想法。当您调用
This.setState
时，React通过将组件标记为需要重新渲染来响应。the
render（）
方法将被自动调用，因此所有JSX都将重新评估和呈现。React将查看它刚刚生成的内容与虚拟DOM中已有的内容之间的差异，并合并到您的更改中

这意味着，无论哪个选项卡以前在其类名中呈现为“active”，都将重新呈现。如果它不再处于活动状态，则呈现代码将不会将活动类连接到该选项卡的类名中。此外，无论哪个类处于活动状态，现在都会将其类名附加为“active”

TL；DR

不要在事件处理程序中操纵DOM。操纵状态并让React通过使用新状态重新呈现来发挥其魔力