Question

如果我有以下json数据，如何使用语义在下拉列表中填充Bird_Name？

注意：我正在使用与es6的反应。

＆＃13;

var birds = [
            {
                "ID": "001",
                "Bird_Name": "Eurasian Collared-Dove"
            },
            {
                "ID": "002",
                "Bird_Name": "Bald Eagle"
            },
            {
                "ID": "003",
                "Bird_Name": "Cooper's Hawk"
            },
        ];

＆＃13;

语义下拉

            <Container>
                <Divider hidden />
                <Dropdown 
                placeholder='Select...' 
                selection
                search
                options={options}
                />
            </Container>

Answer 1

您可以这样做的一种方法是将Bird_Name字段映射为text，并假设您希望将ID作为值：

const options = birds.map(({ ID, Bird_Name }) => ({ value: ID, text: Bird_Name }))

现在，您可以将选项传递到Dropdown组件

您可以在此处查看代码表：https://codepen.io/poda/pen/BYwZNB

Answer 2

您有两种方式：

将您的数据更改为下拉接受的架构
您可以将数据映射到u .* (v .* w) = (u .* v) .* w并将其作为变量放入下拉列表中

如何使用语义UI

2 个答案: