[英]Change selected value component in react-select
有什么方法可以更改所选值组件的设计。在我的选项菜单中,我显示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;
您可以使用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>
);
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.