Изменение режима состояния между компонентами

Question

У меня есть следующие 3 компонента: SectionBox (родительский), разделData и раздел (дети). В следующем коде я пытаюсь обмениваться данными между этими тремя компонентами, так что, когда я нажимаю кнопку в компоненте Раздела, я вижу изменение в компоненте 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>