ReactJS、同じコンポーネント、他のコンポーネントからクラスをToggle onClick

Question

私はMain.jsxの親ファイルを持っています。これは、同じコンポーネントを2つ持ちますが、異なるデータを添付しています。子コンポーネントには、onClickを持つボタンがあります。

Main.jsx

class Main extends React.Component { 
    render() { 
     return (
      <div className="row"> 
        <Child 
         styleName="pane-1 text-center" 
         title="Title 1" 
         description="Some Text" 
        /> 
        <Child 
         styleName="pane-2 text-center" 
         title="Title 2" 
         description="Some Text" 
        /> 
      </div> 
     ) 
    } 
} 

export default Main 

Child.jsx

class Child extends React.Component { 

    render() { 
     return (
      <div className={classnames('pane', this.props.colName)}> 
       <div className={classnames(this.props.styleName)}> 
        <div className="col-sm-6 col-sm-offset-3"> 
         <h2>{this.props.title}</h2> 
         <p>{this.props.description}</p> 
         <button onClick={this.togglePane} className="btn btn-primary-outline">Tell Me More</button> 
        </div> 
       </div> 
      </div> 
     ) 
    } 
} 

export default Child 

Child.jsx上記colNameに小道具をファイルに今、だけのため、変更する必要があるものですユーザーがボタンをクリックするコンポーネント。

ほとんどのコンポーネントは、同様にステートレス保つために私は同様にChild.jsxファイルに次のように試してみましたが、これは動作していないようだ、と私は読んだことから、そのよりよい：

constructor(props) { 
     super(props); 

     this.state = { 
      colName: 'col-sm-6' 
     }; 

     this.togglePane = this.togglePane.bind(this); 
    } 
    togglePane() { 
     if (this.state.colName == 'col-sm-6'){ 
      this.setState({colName: 'col-sm-4'}) 
     } else { 
      this.setState({colName: 'col-sm-6'}) 
     } 
    } 

Answer 1

これは親で処理する必要があります。親は1つをsm-8にし、他をsm-4にすることができる。親で

<button onClick={this.props.togglePane} /> 

、

<Child 
    styleName="pane-1 text-center" 
    colName={this.state.firstCol} 
    togglePane={this.togglePane}      
/> 
<Child 
    styleName="pane-2 text-center" 
    colName={this.state.secondCol} 
    togglePane={this.togglePane}      
/> 

togglePane() { 
    if(this.state.firstCol==='col-sm-6') { 
    this.setState({ firstCol: 'col-sm-8', secondCol: 'col-sm-4' }); 
    } else { 
    this.setState({ firstCol: 'col-sm-6', secondCol: 'col-sm-6' }); 
    } 
}