Ändern des Status einer übergeordneten Komponente mithilfe einer Funktion in der untergeordneten Komponente

Question

Ich bin neu in React und habe mich entschieden, etwas Einfaches wie einen Rechner zu erstellen, um die Grundlagen zu üben. Allerdings habe ich einige Schwierigkeiten, die Logik hinter dem Informationsfluss zu verstehen, und entweder gibt es eine Möglichkeit für eine untergeordnete Komponente, die Logik zu tun und das Elternelement auf natürliche Weise zu aktualisieren.

Zum Beispiel dies die Grundstruktur meines Rechners ist:

class Calculator extends React.Component { 
    render() { 
     return (
      <div className="calculator-main"> 
       <Screen numberOnScreen={this.state.numberOnScreen}/> 
        <NumberButton number={7} /> 
        <NumberButton number={8} /> 
        <NumberButton number={9} /> 
        <OperatorButton operator="plus" view="-"/> 
       .... 
      </div> 
     ) 
    } 
} 


class Screen extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div className="screen">{new Intl.NumberFormat().format(this.props.numberOnScreen)}</div> 
     ); 
    } 
}; 

class NumberButton extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     const zeroClass = this.props.number === 0 ? " zero" : ""; 
     return (
      <button type="button" className={"number" + zeroClass}>{this.props.number}</button> 
     ); 
    } 
}; 

So weiß ich, dass:

• ich die Funktionen innerhalb Rechner erstellen und es als Stütze zu den Tasten passiert Komponenten, und rufen Sie onClick. (Aber es fühlt sich einfach seltsam an).
• Erstellen Sie einen Ereignis-Listener in der Calculator-Komponente, erstellen Sie die -Funktion innerhalb der Schaltflächenkomponente und übergeben Sie den Wert über das Ereignis trigger; (Aber es fühlt sich künstlich an).
• Verwenden Sie eine Art von Global Store?

Aber gibt es keine natürliche Reaktion, dies zu tun?

Danke!

Answer 1

Ich denke, dass Sie über React Komponente Kommunikation wissen wollen. Hier habe ich die Child to Parent-Kommunikation implementiert.

In diesem Fall wird die Status- und Statusänderungsmethode von Parent über Requisiten an die untergeordnete Komponente übergeben. Dann kann das Kind den Status des Elternteils ändern und diese Methode verwenden.

React Component Communication

//Parent component 

class Parent extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state = { 
      content: 'Initial Content' 
     } 
     this.changeContent = this.changeContent.bind(this); 
    } 

    changeContent(event){ 
     this.setState({ 
      content: event.target.value 
     }) 
    } 

    render(){ 
     let { content } = this.state; 
     return <div> 
      <Child content={content} changeContent={this.changeContent}/> 
      <h1>{content}</h1> 
     </div> 
    } 
} 

// Child component 

class Child extends React.Component{ 
    constructor(props){ 
     super(props); 
    } 

    render(){ 
     let { content, changeContent } = this.props; 
     return <input value={content} onChange={changeContent}/> 
    } 
}