这是一个codesandbox链接。尝试选择紫色,您将在控制台中看到日志。下面是相同的代码,以防您想立即看到它。
import chroma from 'chroma-js';
import { colourOptions } from './docs/data';
import Select from 'react-select';
const dot = (color = '#ccc') => ({
alignItems: 'center',
display: 'flex',
':before': {
backgroundColor: color,
borderRadius: 10,
content: '" "',
display: 'block',
marginRight: 8,
height: 10,
width: 10,
},
});
const colourStyles = {
control: styles => ({ ...styles, backgroundColor: 'white' }),
option: (styles, { data, isDisabled, isFocused, isSelected }) => {
const color = chroma(data.color);
return {
...styles,
backgroundColor: isDisabled
? null
: isSelected ? data.color : isFocused ? color.alpha(0.1).css() : null,
color: isDisabled
? '#ccc'
: isSelected
? chroma.contrast(color, 'white') > 2 ? 'white' : 'black'
: data.color,
cursor: isDisabled ? 'not-allowed' : 'default',
};
},
input: styles => ({ ...styles, ...dot() }),
placeholder: styles => ({ ...styles, ...dot() }),
singleValue: (styles, { data }) => ({ ...styles, ...dot(data.color) }),
};
const logConsole = (selectedVal) => {
console.log(selectedVal)
}
export default () => (
<Select
defaultValue={colourOptions[2]}
label="Single select"
options={colourOptions}
styles={colourStyles}
onChange={logConsole}
/>
);
答案 0 :(得分:1)
可能的解决方案是使用hideSelectedOptions
属性隐藏所选值。
<Select
{ ... }
hideSelectedOptions
/>
另一种解决方案是将Select
组件更改为受控组件,并签入onChange
处理程序,如果所选值确实与当前所选值匹配,则什么也不做。
class MySelect extends Component {
state = {
value: null
}
onChange = (selectedValue) => {
const { value } = this.state;
if (value && value.value === selectedValue.value) return;
// Do whatever you want here
this.setState({ value: selectedValue });
}
render = () => (
<Select
{ ... }
value={this.state.value}
onChange={this.onChange}
/>
);
}