在编辑时检查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组件中的复选框

回答

相关问题