I am trying to reset AsyncReact ( https://react-select.com/home ) from a parent component (Hooks) but I cant seem to get it to work. Any help much appreciated.
I can reset it from within the component by setting the state to an empty array but I cant seem to reset it from outside.
Parent Component
const MessengerMessagesTwo = ({ props }) => {
const orgSearchRef = useRef(null);
const handleClearOrgSearch = () => {
orgSearchRef.current.clearValue();
}
return <div>
<button onClick={() => handleClearOrgSearch()}>clear</button>
<MessengerMessagesTwoOrgSearch ref={orgSearchRef} />
</div>
})
Child Component
const MessengerMessagesTwoOrgSearch = forwardRef(({props}, ref) => {
const [inputValue, setInputValue] = useState([]);
useEffect(() => {
setInputValue([]);
return () => {
setInputValue([]); // reset orgs selected
handleOrgSelectedCallback([]);
}
}, [])
return <div>
<AsyncSelect
isClearable
defaultOptions
placeholder="Search Orgs"
loadOptions={loadOptions}
onInputChange={handleInputChange}
onChange={handleChange}
isMulti
noOptionsMessage={i => "Search..."}
ref={ref}
/>
</div>
})
const mapStateToProps = (state) => {
return {
};
};
const mapDispatchToProps = (dispatch) => {
return {
};
};
export default connect(mapStateToProps, mapDispatchToProps, null, {forwardRef: true})(MessengerMessagesTwoOrgSearch);
Seems to be working now. Did not change anything, and I am very confused
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.