清除反应多选/异步

时间:2020-02-10 11:20:50

标签: reactjs react-select

我正在使用以下异步多选择器:

https://react-select.com/home#async

它工作正常,但我想在按任意按钮后清除选择器: enter image description here

带有红色标记的“ 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}); 
     }

谢谢您的帮手!

0 个答案:

没有答案