在編輯時檢查CheckboxGroupInput組件中的複選框

我有一個表單顯示兩個實體Brand和Distribution之間的多對多關係。我通過品牌頁面中的CheckboxGroupInput組件顯示分佈。在表單編輯（編輯組件）期間，我設法預先檢查了在創建（創建）期間以前檢查過的分配（這在documentation中未指定），但我無法選中或取消選中任何分配。在編輯時檢查CheckboxGroupInput組件中的複選框

這裏的版形式：

export class BrandEdit extends Component { 

    constructor(props) { 
      super(props) 
      this.state = { 
       isLoading: true 
      } 
    } 

    componentDidMount() { 

     //Find all distributions 
     restClient(GET_MANY, 'distribution', { 
      sort: {field: 'name', order: 'ASC'} 
     }) 
      .then(response => { 
       return restClient(GET_ONE, 'brand', { 
        id: this.props.match.params.id 
       }).then(brandResult => { 
        let distributionsIds = [] 
        brandResult.data.distributions.forEach(distribution => { 
         distributionsIds.push(distribution.id) 
        }) 
        this.setState({ 
         distributions: response.data, 
         distribution_checked_ids: distributionsIds, 
         isLoading: false, 
        }) 
       }); 
      }) 
    } 

    render() { 
     const { isLoading, distributions, distribution_checked } = this.state 
     return (
      <div> 
       { 
       <Edit {...this.props}> 
        <SimpleForm> 
         <DisabledInput source="id"/> 
         <TextInput label="Nom" source="name"/> 
         <CheckboxGroupInput 
          source="distributions" 
          input={{ 
           value: this.state.distribution_checked_ids, 
           onChange: (checkedDistributionIds) => { 
            this.setState({ distribution_checked_ids: checkedDistributionIds }); 
           } 
          }} 
          choices={distributions} 
          optionValue="id" 
          optionText="name" 
         /> 
        </SimpleForm> 
       </Edit> 
       } 
      </div> 
     ); 
    } 
}

任何想法？

謝謝

來源

2017-05-30 Divk

我們需要將分佈ID的數組傳遞給組件，而不是分佈對象的數組。

這裏的組件：

<CheckboxGroupInput 
    source="distributions" 
    choices={distributions} 
    optionValue="id" 
    optionText="name" 
/>

數據應該是這樣的：

{ 
"id": 2115, 
"name": "Test", 
"distributions": [12, 13, 14] 
}

來源

2017-05-31 16:02:58 Divk

請刪除input道具。你爲什麼要自己處理表單狀態？ AOR使用了redux-form來處理這個問題。

來源

2017-05-30 15:13:10 wesley6j

那麼如何預檢覆選框而編輯的形式？ – Divk

如果您遵循示例，AOR會自動執行此操作。 EDIT組件獲取數據並將其發送到redux-form。還原形式確保所有輸入都以正確的值開始。 – wesley6j

你有沒有使用CheckboxGroupInput組件的例子？ – Divk

在編輯時檢查CheckboxGroupInput組件中的複選框

回答

相關問題