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

Question

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

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

我尝试在这部分 selecteds.push(kid.id); 中推送具有不同属性(id、名称、键、值、标题等)的对象，但这些都不起作用。

我的选择函数是这样的

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)
});