ドロップダウンですでに選択されている値を選択すると、react-selectドロップダウンのonChangeがトリガーされます。すでに選択されている値が再度選択された場合にonChangeイベントをトリガーしないようにreact-selectを構成する方法はありますか？
これがコードサンドボックスのリンクです。Purpleを選択してみると、コンソールにログが表示されます。以下は、すぐに見たい場合の同じコードです。
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}
/>
);
考えられる解決策は、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}
/>
);
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加