React：在同級組件中通過onClick可視地重置HTML選擇標記

我正在爲有條件地顯示以下兩個選項之一的記錄執行篩選：1）record.jsx組件列表，或2）單個noResults.jsx組件。React：在同級組件中通過onClick可視地重置HTML選擇標記

過濾器（filter.jsx）位於名爲recordsHeader.jsx的組件中，作爲HTML選擇標記。它有一個onChange事件，它調用一個getRecords方法，該方法允許根據select標籤中的某些選項對結果記錄進行過濾。

目標：我想在noResults.jsx中設置一個按鈕，將過濾器設置爲「全部」。問題：我可以將getRecords方法傳遞給它，它會顯示它們，但不會將選擇標記直觀地重置爲「全部」。

我知道我可以用jQuery或Vanilla抓住元素並手動重置它，這很有效，但我想讓React爲我做所有dom的東西。

地圖文件結構：

- recordsDashboard.jsx 
    - savedRecordsView.jsx 
    - recordsHeader.jsx 
     - filter.jsx 
    - noResults.jsx <-- click here and visully reset filter.jsx 
    - record.jsx

來源

2017-04-05 Mike Fleming

在沒有看到代碼，我想象中的savedRecordsView呈現類似的東西在沒有結果的情況下，執行以下操作：

<RecordsHeader /> 
<NoResults />

這意味着，savedRecordsView是共享這兩個組件的「父」。通過一些重寫，您可以通過道具傳遞迴調到NoResults，該按鈕可以用來觸發所有過濾器的設置。

這個回調會更新一個傳遞給RecordsHeader的道具，然後是Filter，它可以從原來的東西中重新渲染適當的'all'設置。

來源

2017-04-05 17:52:10 bmartin

不錯，是的，這是非常多的。問題主要是找出哪個組件應該保持狀態，以及我遇到的問題是，像select標籤，窗體或textfield這樣的HTML元素在React之外都有自己的狀態。 –

解決！在我的問題中，我很難說清楚這一點，但像select，form和textfield這樣的HTML元素在React之外都有自己的狀態。

我解決了這個問題，將我的handleSelectChange方法和filterValue變量從select組件中移動到savedRecordsView.jsx中，這樣filter.jsx和noResults.jsx都可以共享它們。

這篇文章在React文檔中關於controlled components幾乎就是我正在尋找的東西。

來源

2017-04-06 14:53:15

React：在同級組件中通過onClick可視地重置HTML選擇標記

回答

相關問題