使用 setFieldsValue 时如何在 Ant Design Select 中显示选项名称

Question

我正在使用 Ant Design 的一个组件，最近我在 select 所有选项中添加了一个按钮。功能没问题，但在字段中它显示选项键或 ID，而不是显示选项名称。

我的问题是，在 multi-select 组件中使用 setFieldsValue 方法时，有没有办法显示选项名称？

我尝试在这部分 selecteds.push(kid.id); 中推送具有不同属性（id、名称、键、值、标题等）的 object，但 none 这些作品。

我的 select 函数看起来像这样

selectAllKids = () => {
    const { kids } = this.props;
    let selecteds = [];

    kids.map(kid => {
      selecteds.push(kid.id);
    });

    this.props.form.setFieldsValue({
      kids: selecteds
    });
  };

我的组件：

         {getFieldDecorator("kids", {
          rules: [
            {
              required: true,
              message: "Selecciona alumnos"
            }
          ]
        })(
          <Select
            size="large"
            mode="multiple"
            placeholder="Selecciona alumnos"
            loading={kidsLoading}
          >
            {kids.map(kid => (
              <Option key={kid.id}>{kid.name}</Option>
            ))}
          </Select>
        )}

我目前的结果是：我的预期结果是：提前致谢！

Answer 1

您应该映射到 name 而不是 id:

this.props.form.setFieldsValue({
  kids: kids.map(({ name }) => name)
});

使用 setFieldsValue 时如何在 Ant Design Select 中显示选项名称

How to show option name in Ant Design Select when using setFieldsValue

multi-select

antd

rc-form