我正在使用以下异步多选择器:
https://react-select.com/home#async
带有红色标记的“ X”会清除选择器,但我真的不知道如何使用它。 这是我的代码:
import "bootstrap/dist/css/bootstrap.css";
import Async, { makeAsyncSelect } from "react-select/async";
class AppSelector extends React.Component {
appList = [];
state = {
selectedOption: null
};
componentDidMount = () => {
this.appList = JSON.parse(localStorage.appList);
};
handleChange = (newValue, actionMeta) => {
this.props.getAppSelectorValue(newValue);
};
getOptions = () => {
let temp = [];
let appArr = JSON.parse(localStorage.appList);
// console.log('in get options',appArr)
appArr.map(obj => {
obj.value = obj.id;
obj.label = obj.product;
delete obj.id;
delete obj.product;
temp.push(obj);
});
return temp;
};
render() {
let appArr = JSON.parse(localStorage.appList);
let appList = [];
appArr.map(obj => {
obj.value = obj.id;
obj.label = obj.product;
delete obj.id;
delete obj.product;
appList.push(obj);
});
// console.log('in render',appList)
const { selectedOption } = this.state;
return (
<div className="appSelector">
<Async
loadOptions={this.getOptions}
defaultOptions={appList}
cacheOptions
isMulti
inputValue={selectedOption}
onChange={this.handleChange}
/>
</div>
);
}
}
export default AppSelector;
该组件在主组件(名为“ Home”)上被调用:
appSelectorHTML=()=>
{
let htmlArr=[];
if(localStorage.appList)
{
// if(this.state.selectorRefresh===false)
htmlArr.push(
<AppSelector
selectorRefresh={this.state.selectorRefresh}
appList={this.state.appList}
getAppSelectorValue={this.getAppSelectorValue}
></AppSelector>
)
}
else
{
window.location.reload();
// this.appSelectorHTML();
}
return htmlArr
}
道具功能在主要部分中:
getAppSelectorValue=(selectedApps)=>
{
this.selectedApps=selectedApps;
}
发送表单功能:
sendForm=()=>
{
this.toggleModal();
let newNetworks=this.createNetworks(this.newNetworks,this.selectedApps)
let addArr=[...this.state.cashedNetworks].concat(newNetworks);
let convertedNetworks=this.relationshipDisplay(addArr)
sessionStorage.newNetworks=JSON.stringify(convertedNetworks);
this.setState({cashedNetworks:convertedNetworks});
}
谢谢您的帮手!