在“antd”库（Ant Design）中使用选择时，所选选项显示值而不是标签

Question

我在 'antd' (Ant Design) 库中使用 select。使用 onChange 处理程序时，所选选项显示选项的值而不是标签。

我正在添加工作示例sandbox。在示例中，我已将 DATA1 中的 onChange 注释掉，因此它可以按预期工作。

 <Select        
        // onChange={(key, val) => onChangeHandler1(key, val)}
        placeholder="Select any one"
        style={{ width: 120 }}
        options={data
          .filter((d) => d.disabled === false)
          .map((_) => {
            return {
              label: _.name,
              value: _.id
            };
          })}
        bordered={false}
      />

当注释掉 onChange 时，行为符合预期，所选值显示标签（名称）而不是值（id）。

Answer 1

试试这个：只需将 value 属性添加到两个选择中。例如：-

<Select value={option1} .../>
<Select value={option2} .../>