通過另一個組件中的狀態反應輸入值

我正在構建食譜應用程序。目前我有一個彈出框，當你想添加一個配方。在這個彈出窗口中，我希望在確認要添加配方時存儲輸入。我研究了值事件目標方法，但是我相信我很難讓它工作，因爲這個彈出框的狀態是通過更高層的組件（主應用程序組件）訪問的。通過另一個組件中的狀態反應輸入值

GitHub的鏈接：https://github.com/jeffm64/recipe-box2/tree/master/src/components

這是我現在必須嘗試使它工作，但這會導致彈出框不再來了。這是handleChange沿着主應用程序組件的狀態：

getInitialState: function() { 
     return { 
      recipes: [], 
      addRecipeVisibility: false, 
      editRecipeVisibility: false, 
      value: "" 
     }; 
}, 

handleChange: function(event) { 
     this.setState({value: event.target.value}); 
},

這是彈出框的輸入JSX：

<input type="text" value={this.state.value} onChange={this.props.handleChange} />

來源

2017-04-04 J64

您是否可以更新您的問題以包含顯示組件之間交互的代碼？ – elevine

是的，我可以做到這一點。我其實只是意識到我沒有按下我輸入的GitHub，所以我一定能看到混亂。 – J64

我不知道如果我正確地得到了你的問題，但我會嘗試給你一個答案。

您試圖將當前組件的狀態傳遞給輸入。據我所知，你還沒有定義一個國家。使用構造函數並創建一個默認狀態。

然後，您可以將this.state.value傳遞給輸入。另外，如果對輸入的更改由父組件處理並存儲在該組件狀態中，則應該將值作爲prop傳遞給子組件。在這種情況下，不需要構造函數。

來源

2017-04-04 19:11:31 Dlyrious

那麼值狀態是在父組件中。我試着用onChange通過道具來做，但我一直沒能得到結果。這可能是因爲我所看重的「this.state.value」並不是一個道具，但我不太確定該作品的去向。 – J64

如果值處於父級狀態，則必須將其作爲道具傳遞，然後將道具分配給輸入值。 – Dlyrious

現在明白了。謝謝您的幫助！ – J64

通過另一個組件中的狀態反應輸入值

回答

相關問題