編集中にCheckboxGroupInputコンポーネントのチェックボックスをチェックする

Question

2つのエンティティBrandとDistributionの間に多対多関係を表示するフォームがあります。 ブランドページにCheckboxGroupInputコンポーネントを使ってディストリビューションを表示します。フォームの編集中（編集コンポーネント）には、作成中（作成中）にチェックされたディストリビューションを事前にチェックすることができましたが（documentationでは指定されていません）、ディストリビューションをチェックすることも、チェックを外すこともできません。

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> 
     ); 
    } 
} 

任意のアイデア：

ここ版のフォームですか？

ありがとうございました

Answer 1

配布IDの配列をコンポーネントに配布する必要があります。配布オブジェクトの配列ではなく、配布オブジェクトの配列を渡す必要があります。ここで

は、コンポーネントの：

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

データは次のようになります。フォームの編集中にチェックボックスを事前チェックするそれでは、どのよう

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

Answer 2

input小物を取り外してください。なぜ自分でフォームの状態を扱うのですか？ AORはredux-formを使ってそれを処理します。