Reactjs 更改“反应选择”中的选定值组件

是否有任何方法可以更改所选值组件设计，在我的选项菜单中，我显示CscId和CscDesc，但当我选择该选项时，我只想显示CscId。是否有任何方法可以更改选定的值组件？我在谷歌上搜索这一个，已经花了1天时间。请帮帮我

这是我的选择

import React  from "react";
import Select from 'react-select';

const costcenterselect = ({ value, onChange, id, datasource }) => {    
  const formatOptionLabel = ({ CscID, CscDesc }) => (            
    <div style={{ display: "flex"}}>
      <div style={{width:'40%'}}>{CscID}</div>                
      <div>{CscDesc}</div>                
    </div>
  );  

  return (
    <div>
      <Select 
        id={id}
        menuIsOpen={true}    
        formatOptionLabel={formatOptionLabel}
        getOptionValue={option => `${option.CscID}`}
        options={datasource}
        onChange={onChange}
        defaultValue={value}        
      />
    </div>           
  )
}

export default costcenterselect;

从“React”导入React；
从“反应选择”导入选择；
const costcenterselect=（{value，onChange，id，datasource}）=>{
const formatOptionLabel=（{CscID，CscDesc}）=>（
{CscID}
{CscDesc}
);  
返回(
`${option.CscID}`}
选项={datasource}
onChange={onChange}
defaultValue={value}
/>
)
}
导出默认成本中心选择；

您可以使用

formatOptionLabel

本身来完成。它还有第二个参数，它为您提供了元信息，如

context

，您可以使用它有条件地呈现。这是一本书

您可以看到，

context===value

允许您为选定的值进行渲染，而

context===menu

为选项进行渲染

const formatOptionLabel = ({ CscID, CscDesc }, { context }) => {
    if (context === "value") {
      return <div>{CscID}</div>;
    } else if (context === "menu") {
      return (
        <div style={{ display: "flex" }}>
          <div style={{ width: "40%" }}>{CscID}</div>
          <div>{CscDesc}</div>
        </div>
      );
    }
  };

const formatOptionLabel=（{CscID，CscDesc}，{context}）=>{
如果（上下文==“值”）{
返回{CscID}；
}else if（上下文==“菜单”）{
返回(
{CscID}
{CscDesc}
);
}
};

OMG，非常感谢，这正是我想要的。我可以知道你是怎么知道这个功能的吗？很高兴它有帮助。也许从

react-select

的文档中很难访问它，但是仔细看一下，您可以看到

formatOptionLabel

函数的整个定义都很简单。此外，由于它是开源的，您也可以在中找到解决方案。