我正在使用 React select 組件進行下拉選擇。所有功能都作業正常，但是當從下拉串列中選擇選項時，我無法設定所選選項背景顏色的樣式。嘗試了幾個選項，但這也不起作用。
以下是相同的代碼：-
import React, { useContext, useState } from "react";
import moment from "moment";
import Select from "react-select";
import DataProvider from "context/DataContext";
export default function Compare() {
const [selectedValue, setSelectedValue] = useState([]);
const {
fromDate,
toDate,
} = useContext(DataProvider);
const customStyles = {
option: (base, state) => ({
...base,
color: "#1e2022",
backgroundColor: state.isSelected ? "rgba(189,197,209,.3)" : "white",
padding: ".5rem 3rem .5rem .5rem",
cursor: "pointer",
}),
singleValue: (provided, state) => {
const opacity = state.isDisabled ? 0.5 : 1;
const transition = "opacity 300ms";
return { ...provided, opacity, transition };
},
};
const options = [
{
value: [
moment(fromDate).subtract(1, "days"),
moment(toDate).subtract(1, "days"),
],
label: "Previous Day",
},
{
value: [
moment(fromDate).subtract(7, "days"),
moment(toDate).subtract(7, "days"),
],
label: "Previous Week",
},
];
const handleApply = (event) => {
setSelectedValue(event);
};
return (
<Select
onChange={handleApply}
options={options}
styles={customStyles}
placeholder="Compare to Past"
/>
);
}
uj5u.com熱心網友回復：
有一個關于此的問題。顯然 isSelected 僅用于多選。對于單選，您可以檢查：
state.data === state.selectProps.value
https://github.com/JedWatson/react-select/issues/3817
uj5u.com熱心網友回復：
你可以利用 hasValue 道具代替
https://github.com/JedWatson/react-select/issues/3817#issuecomment-547487812
backgroundColor: state.hasValue ? "rgba(189,197,209,.3)" : "white",
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353790.html
標籤：javascript 反应 选择 反应选择
下一篇：分派外部組件