使用子組件中的函數更改父組件的狀態

Question

我是React的新手，我決定構建一些簡單的計算器來練習它的基礎知識。然而，我很難理解信息流背後的邏輯，或者有一種方法讓子組件執行邏輯並以自然的方式更新父項。

例如，這是我的計算器的基本結構：

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> 
     ); 
    } 
}; 

所以我知道：

• 我可以創建功能裏面計算器，並將它傳遞爲道具，以 按鈕組件，並在onClick上調用它。 （但它只是覺得奇怪）。
• 在Calculator組件中創建一個事件監聽器，在按鈕組件中創建 函數，並通過事件 觸發該值; （但感覺是人造的）。
• 使用某種全球商店？

但是，有沒有自然的反應方式來做到這一點？

謝謝！

Answer 1

我想你想知道關於React組件通信。在這裏，我已經實施了從小孩到家長的溝通。

在這種情況下，Parent的狀態和狀態改變方法通過道具傳遞給子組件。然後小孩可以改變父母的狀態使用這種方法。

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}/> 
    } 
}