Question

我正在使用Select Box from antd。在以下代码段中，我在选择框中动态创建了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：'默认'，名称： '' }）;

并将analyticMethodtOptions的条目复制到上面声明的数组“ selectOptions”

selectOptions = selectOptions.concat(analyticalMethods);

然后

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

然后渲染

<Select>
    {selectOptions}
</Select>

在动态创建的选择框顶部插入一个空的选项框

1 个答案: