React-select кнопка "Сбросить все" не работает
Решил использовать библиотеку react-select, задача такова, есть калькулятор, где несколько select. И никак не могу настроить кнопку "Сбросить все", чтобы все значения обнулились. Нашел пример, для одного select, но когда их много, прописывать каждому уникальные значения не релевантно
handleChange должен обрабатывать изменения, а handleClick занулять, change Вроде работает нормально, а вот при клике ничего не происходит, хотя если посмотреть в консоли, то сам объект сбрасывается
const [value,setValue] = useState({})
const handleChange = (val,name) => {
const newValue = {
...value,
[name]: val
}
setValue(newValue)
}
const handleClick = () => setValue({})
<div className={classes.field}>
<div className={classes.subtitle}>Язык</div>
<CustomSelect propValue={value['string'] || null} onChange={handleChange} name={'string'} id={1} placeholder={'На каком языке?'} styles={customStyles}/>
{JSON.stringify(value)}
</div>
<div className={classes.field}>
<div className={classes.subtitle}>Страна</div>
<CustomSelect propValue={value['2'] || null} onChange={handleChange} name={'2'} id={2} placeholder={'На каком языке?'} styles={customStyles}/>
</div>
Компонента CustomSelect
export const CustomSelect = ({placeholder,id,propValue,onChange, options, styles,name}) =>{
const initialOptions = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
{ value: 'vanilla', label: 'Vanilla' },
{ value: 'vanilla', label: 'Vanilla' },
{ value: 'vanilla', label: 'Vanilla' },
{ value: 'vanilla', label: 'Vanilla' },
{ value: 'vanilla', label: 'Vanilla' },
{ value: 'vanilla', label: 'Vanilla' },
{ value: 'vanilla', label: 'Vanilla' },
];
const [value,setValue] = useState(propValue)
useEffect(()=>{
setValue(propValue)
}, [propValue])
const handleOnChange = ({value}) => {
if (typeof onChange ==='undefined') {
return null
} else {
onChange(value, name)
}
}
return (
<Select onChange={handleOnChange} name={name} value={value} instanceId={id} placeholder={<span>{placeholder}</span>} styles={styles || customStyles} options={options ?? initialOptions} />
)
}