コンポーネント間の状態モードを変更します。

Question

私は以下の3つのコンポーネントを持っています：SectionBox（親）、SectionData、Section（子）。次のコードでは、これらの3つのコンポーネント間でデータを共有しようとしています。そのため、Sectionコンポーネントのボタンをクリックすると、SectionDataコンポーネントの変更が表示されます。 ここで見たいくつかの例では、 'state'オブジェクトを使って遊んで、関数をパラメータとして渡してみましたが、うまくいきませんでした。 はここに私のコードです：

*

import React from 'react'; 
import Section from './Section'; 
import SectionData from './SectionData'; 

export default class SectionBox extends React.Component { 

    constructor() { 
     super(); 
     this.state = { 
      dataToShow: "A" 
     }; 
    } 

    render() { 
     return (
      <div className="col-md-2"> 
       <div className="container-fluid"> 
        <Section onUpdate={this.changeDataToShowState.bind(this)} title="A"/> 
        <Section onUpdate={this.changeDataToShowState.bind(this)} title="B"/> 
        <Section onUpdate={this.changeDataToShowState.bind(this)} title="C"/> 
       </div> 
       <SectionData data = {this.state.dataToShow}/> 
      </div> 

    changeDataToShowState (val) { 
     this.setState({dataToShow: val}); 
    } 
} 

**

import React from 'react'; 

export default class Section extends React.Component { 
    render() { 
     return (
     <div className="row"> 
      <div className="col-md-12"> 
       <div className="float-box"> 
        <button onclick={this.handleClick.bind(this)}>{this.props.title}</button> 
       </div> 
      </div> 
     </div> 
     ) 
    } 

    handleClick() { 
     var stateMode = this.props.title; 
     this.props.onUpdate(stateMode); 
    } 
} 

---

import React from 'react'; 

export default class SectionData extends React.Component { 

    render() { 
     var result; 

     if (this.props.data === "A") { 
      result = "A"; 
     } else { 
      result = "B or C"; 
     } 

     return (
      <div className="col-md-10"> 
       <div className="float-box-content"> 
        <div>{result}</div> 
       </div> 
      </div> 
     ); 
    } 
} 

Answer 1

あなたがタイプミスを得、それは、それは "onClickの" だではない "onclickの" です。

<button onclick={this.handleClick.bind(this)}>{this.props.title}</button> 

が

<button onClick={this.handleClick.bind(this)}>{this.props.title}</button>