单击当前组件时删除类名兄弟组件，并在当前切换以删除它自己的类

Question

我是新的反应，并尝试制作一个按钮，如果我点击当前按钮，将删除兄弟类，并且当前按钮可以删除它自我类（切换），我已经尝试，它似乎即时通讯找不到线索。这是我的代码。

export default class Child extends Component {
render(){
    return(
      <button
         onClick={this.props.onClick}
         className={this.props.activeMode ? 'active' : ''}>
         {this.props.text}
      </button>
     )
   }
}

export default class Parent extends Component {
   constructor(props) {
   super(props);
   this.state = {
     selectedIndex: null,
   };
 }

  handleClick (selectedIndex) {
   this.setState({
    selectedIndex,
   });
  }

  render () {
    const array = ["Button 1","Button 2"];
    return (
     <div>
       {array.map((obj, index) => {
       const active = this.state.selectedIndex === index;
       return <Child
       text={obj}
       activeMode={active}
       key={index}
       onClick={() => this.handleClick(index)} />
       })}
     </div>
     )
   }
 }

Answer 1

我并不害羞，我明白你的理解是正确的

你知道这样的事吗？

class Child extends React.Component {
render(){
    return(
      <button
         onClick={this.props.onClick}
         className={this.props.activeMode ? 'active' : ''}>
         {this.props.text}
      </button>
     )
   }
}

class Parent extends React.Component {
   constructor(props) {
   super(props);
   this.state = {
     selectedIndex: null,
   };
 }

  handleClick (selectedIndex) {
    let selected = this.state.selectedIndex === selectedIndex ? null : selectedIndex;	
    this.setState({
	selectedIndex: selected,
    });
  }

  render () {
    const array = ["Button 1","Button 2"];
    return (
    <div>
    {
        array.map((obj, index) => {
        return <Child text={obj}
                    activeMode={this.state.selectedIndex === index}
                    key={index}
                    onClick={() => this.handleClick(index)} />
        })
   }
   </div>
 )
   }
 }

ReactDOM.render(
  <Parent name="World" />,
  document.getElementById('container')
);

.active {
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>