如何在React中訪問這些值？

我有這個容器組件（父）和子組件。我正在構建我的應用程序與容器組件模式（我嘗試:)）。如何在React中訪問這些值？

所以，父母接受所有狀態處理，而孩子只接受道具並基於他們顯示輸出。
但是，我來到這個小問題：孩子顯示2個按鈕（+和 - ）和兩個單選按鈕（稱他們1和2）。基於哪個無線電被檢查，我需要在父母身份更新狀態。

我想通過ref做到這一點，但我會保持良好的做法，並避免使用它。
我想過的其他想法是通過按鈕按下（綁定到父）被調用的函數，但我看不到用子組件中傳遞的參數調用此函數的方法。

兒童：

<label><input type='radio' name='time'/> Work time</label> 
<label><input type='radio' name='time' /> Break time</label> 
<button onClick={this.props.valueControl} className='add'>+</button> 
<button onClick={this.props.valueControl} className='sub'>-</button>

感謝您的幫助！

來源

2016-11-14 Krizzu

使用refs有什麼問題？ – Pineda

他們被認爲是不好的做法，所以我避免使用它們 – Krizzu

，你會從你的子組件父溝通的方式是通過使用屬性傳遞迴調：

在Parent.js

：

... 
    someEventOccured(event) { 
    this.modifyState(); 
    } 

    render() { 
    ... 
    <child-component onSomeEvent={this.someEventOccured.bind(this)}> 
    ... 
    } 
}

在Child.js

：

... 
    render() { 
    ... 
    <button onClick={this.props.onSomeEvent}></button> 
    ... 
    } 
}

在現實生活中，您可能會將一個Child方法附加到處理該事件的onClick，並僅將數據發送回Parent，而不是整個事件。

來源

2016-11-14 10:28:26 norbertk

是的，但我的問題是：我如何從子組件獲取值？就像，我想檢查哪個單選按鈕在子組件中被選中，所以我可以決定增加哪個數值。我如何在傳遞給孩子的函數中做到這一點？ – Krizzu

如果您需要訪問孩子的值，這意味着您將狀態存儲在錯誤的控制器中。應通過回調影響他們的變化通知家長。如果你想查詢一個孩子的狀態，而這個孩子中沒有發生任何事情，這意味着這個狀態應該存在於父母身上。 – norbertk

嘿，謝謝！我已經設法做到了，愚蠢的我:)我已經添加了一個更多的功能從父母被點擊輸入點擊兒童。卓越的作品:) – Krizzu

如何在React中訪問這些值？

回答

相關問題