Question

我使用的是语义UI反应下拉列表，我的工作正常。问题是，在我的表单上，我正在使用Mobx存储从数据库中提取数据。我为下拉列表中的选项设置了阵列。当从商店加载表单时，下拉列表的文本字段为空白，如果我单击下拉列表，则可以看到所选选项为突出显示（粗体）。如何获取文本字段以显示默认选项。如果有人可以看下面的代码，并且可以让我知道我需要做什么，我会在下面提供一些代码。

感谢您的所有帮助。

这是下拉列表的代码：

<div className="col-sm-3">
  <div className="bg-primary text-white text-center">
    Driver
  </div>
<div>
  <Dropdown
    selection
    fluid
    id="driver"
    name="driver"
    ref="driver"
    onChange={this.handleChange}
    value={this.props.EquipmentStore.truck_detail.driver}
    options={this.props.EquipmentStore.driver_list}/>
  </div>
</div>

这是我构建driver_list的方式，基本上是从数据库中获取用户列表，并创建一个包含值和文本字段的数组

let newUserItem = {
    value: getUser.id,
    text: getUser.first_name + " " + getUser.last_name
};
this.driver_list.push(newUserItem)

truck_detail.driver中的值是一个数字值，与driver_list值字段中的值字段中的值相同...这一切正常，我无法获取要在文本字段中显示的文本值默认情况下是下拉列表。

这是我用来构建选项列表的代码：

async loadDriverList() {
    let endpoint = '/api/users/profile/?owner=True';
    this.driver_list.length = 0;
    let lookupOptions = {
        method: "GET",
        headers: {
            'Content-Type': 'application/json'
        }
    };
    try {
        const response = await fetch(endpoint, lookupOptions);
        const profile_list = await response.json();
        const userItem = {value:0, text:'Select Driver'};
        this.driver_list.push(userItem);
        let array_length = profile_list.length;
        for (let i = 0; i < array_length; i++) {
            let ownerId = profile_list[i].user;
            let endpoint = '/api/users/users/' + ownerId + '/';
            let userList = await fetch(endpoint, lookupOptions);
            let getUser = await userList.json();
            let newUserItem = {
                value: getUser.id,
                text: getUser.first_name + " " + getUser.last_name
            };
            this.driver_list.push(newUserItem)
        }
    } catch(e) {
        console.log(e)
    }
}

Answer 1

与Predrag Beocanin进行了大量交谈之后，我已经解决了这个问题。归结为我的表单（带有下拉菜单）在完全填充选项列表之前就已经呈现。在我的应用程序中，我有一个显示项目列表的表格，一旦单击该项目，它将呈现该列出项目的详细表格。最初，当您单击要查看其详细信息的项目时，我会尝试填充我的选项列表。因为选项列表基本上是静态列表，所以当您查看第一个表单时，我现在正在填充该列表。现在，当您单击该项目以查看“下拉列表”选项时，该选项已完全填充，并且可以按我预期的那样工作。

感谢您的帮助，预拖动。

下拉列表不显示默认项

1 个答案: