如何在蚂蚁设计复选框中使用值对象作为选项?

时间:2019-08-29 06:04:42

标签: javascript reactjs antd

我正在尝试将以下数据用于“蚂蚁设计”复选框。

以下是数据:

external_options: [
    {
        label: "fruit-1",
        value: {
            name: "apple",
            is_enabled: true,
        }
    },
    {
        label: "fruit-2",
        value: {
            name: "orange",
            is_enabled: true
        }
    },
    {
        label: "fruit-3",
        value: {
            name: "banana",
            is_enabled: false   
        }
    }
]

和蚂蚁设计CheckboxGroup组件

const { external_options.value } = this.props.fields.options.externalInternalOptions

const checkedOption = external_options.value.filter(option => option.value.is_enabled).map(option => option.value.name) // ["apple", "orange"]

    onExternalChange = (checkedValue) => {
        this.setState({
            checkedValue
        })
    }

   this.setState ({
        checkedOption,
    })

render() {
  <FormItemRow>
    <Col span={24} style={colStyle}>
       <FormItem label={'fruits'} colon={ false } style={{ marginBottom: 0 }}>  
            <CheckboxGroup options={external_options.value} value={checkedOption} onChange={this.onExternalChange}/>
       </FormItem>
    </Col>
  </FormItemRow>
}

因此 external_options 获取上方的对象数组,而 value 获取水果名称的数组。

但是当我放入 external_options 包含两个对象

时,
{ label: "fruit-1", value: { name: "apple" is_enable: true } }

然后我收到警告说

Warning: Encountered two children with the same key, `[object Object]`. 

并且表单检查不起作用。

是否可以将value对象用于checkboxGroup?

0 个答案:

没有答案