2017-07-07 11 views
0

我使用Show顯示學生頁面。在學生頁面上,我想顯示許多課程的列表,並且列表必須分頁。如何使用Admin On Rest將動態過濾器傳遞給List組件?

export const StudentShow = (props) => (
     <Show title='Student' {...props}> 
      <SimpleShowLayout> 
       // correctly displays the student ID 
       <TextField label='id' source='id' /> 
       <ReferenceManyField 
        label='Courses' 
        target='course' 
        id='student.id' 
        reference='courses'> 
        // how can I properly pass the student ID to List? 
        <List {...props} filter={{ student: student.id }}> 
         <Datagrid> 
          <TextField source='code' /> 
         </Datagrid> 
        </List> 
       </ReferenceManyField> 
      </SimpleShowLayout> 
     </Show> 
    ); 

ReferenceManyField正確地進行API調用來/courses/?student=<studentId>,但是List只是讓到/courses/通話。我無法將學生ID傳遞給List組件。

如何將學生ID傳遞給List組件?

回答

0

您可以在登錄時將StudentID保存在localStorage中,並使用它來創建過濾器。沒有測試過這個。但我認爲它應該起作用。

而且我不知道該列表是你應該通過爲孩子ReferenceManyField組件。它應該是一個迭代器組件,例如DataGrid或SingleFieldList。

https://marmelab.com/admin-on-rest/Fields.html#referencemanyfield

+0

我不想在本地存儲中存儲任意值。你是正確的名單並不意味着是ReferenceManyField的子組件。我選擇了名單的原因是使用內置的分頁,其中的DataGrid沒有(https://github.com/marmelab/admin-on-rest/issues/561) – mcranston18

+0

如果學生ID不是ID當前登錄的學生,那麼你不應該存儲它。 列表過濾器可以通過過濾器prop拍攝的操作進行更改。 https://marmelab.com/admin-on-rest/List.html#filters 根據當前的學生ID,您可以嘗試連接一直處於開啓狀態的默認過濾器。 –

+0

這很有趣。你知道,如果它可以設置使用列表過濾器組件永久/默認篩選器? – mcranston18

0

我能夠通過創建另一個組件來訪問父記錄。

const Courses = props => (
    let studentRecord = props.record; 

    <div className='field'> 
     <ReferenceManyField 
      target='course' 
      reference='courses'> 
      <List {...props} filter={{ student: studentRecord.id }}> 
       <Datagrid> 
        <TextField label='id' source='id' /> 
       </Datagrid> 
      </List> 
     </ReferenceManyField> 
    </div> 
); 

export const StudentShow = (props) => (
    <Show title='Student' {...props}> 
     <SimpleShowLayout> 
      // correctly displays the student ID 
      <TextField label='id' source='id' /> 
      <Courses {...props} /> 
     </SimpleShowLayout> 
    </Show> 
); 
相關問題