在動態創建的選擇框頂部插入一個空的選項框

Question

我正在使用antd中的Select Box 。 在以下代碼段中，我將在選擇框中動態創建Option ，然后返回屬於名為analyticalMethodtOptions的數組。

let analyticalMethodtOptions =
  analyticalMethods &&
  analyticalMethods.map((aM, i) => (
    <Option key={i} value={aM.id}>
      {aM.name}
    </Option>
  ));

現在，我還想在頂部添加一個沒有任何值的空Option欄，並將其設置為默認值。 我該怎么辦？

我想插入一個空的選項欄，例如：

<Option value=""></Option>

在analyticalMethodtOptions的頂部，以便在選擇框的頂部可以使用空項目。

我稍后使用它來將選擇框呈現為：

  <Select
            placeholder="Select the Analytical Method"
            showSearch={true}
            filterOption={selectSearchFilter}
            defaultValue=""
          >
            {analyticalMethodtOptions}
   </Select>

Answer 1

聲明一個數組並推送一個帶有空值的條目。

var selectOptions = []; selectOptions.push（{id：'default'，名稱：''}）;

然后將analyticMethodtOptions的條目復制到上面聲明的數組“ selectOptions”中

selectOptions = selectOptions.concat(analyticalMethods);

然后

selectOptions = selectOptions.map((aM, i) => (
            <Option key={i} value={aM.id}>
                {aM.name}
            </Option>
        ));

然后在渲染

<Select>
    {selectOptions}
</Select>