क्या react-select को मेनू बंद करने या धुंध का चयन करने के विकल्प का चयन करने का निर्देश देने का कोई तरीका है, लेकिन केवल तभी जब यह बनाया गया हो (डिफ़ॉल्ट सूची से नहीं)?

संदर्भ:

मेरे पास ई-मेल पतों की एक सूची है और मैं उपयोगकर्ता को सूची से चयन करने या नया ई-मेल पता टाइप करने की अनुमति देना चाहता हूं और फिर सबमिट बटन दबाएं। मैं react-select के Creatable घटक के साथ चुनिंदा भाग करता हूं और यह काम करता है।

import CreatableSelect from 'react-select/creatable';

<CreatableSelect
    options={options}
    isMulti={true}
    isSearchable={true}
    name={'emailAddresses'}
    hideSelectedOptions={true}
    isValidNewOption={(inputValue) => validateEmail(inputValue)}
/>

लेकिन मेरे उपयोगकर्ताओं के साथ क्या होता है कि वे नया ई-मेल पता टाइप करते हैं, समझ में नहीं आता कि उन्हें ड्रॉपडाउन मेनू में नए बनाए गए विकल्प पर क्लिक करना होगा और सीधे फॉर्म के सबमिट बटन को हिट करना होगा। इस प्रकार मेनू बंद हो जाता है क्योंकि चयन का फोकस चोरी हो जाता है और फॉर्म सबमिट किया जाता है जिसमें कोई ई-मेल पता नहीं होता है।

मैं एक तरीका ढूंढता हूं कि मेनू बंद होने से पहले मैं बनाए गए विकल्प का चयन कैसे कर सकता हूं और टाइप किया गया विकल्प गायब हो जाता है।

3
dakur 14 सितंबर 2020, 12:19

1 उत्तर

सबसे बढ़िया उत्तर

आप inputValue का ट्रैक रख सकते हैं और inputValue को एक नए विकल्प के रूप में जोड़ सकते हैं जब onMenuClose और onBlur कॉलबैक ट्रिगर हो जाते हैं।

ध्यान रखें कि यदि आप चयनित क्षेत्र के बाहर कहीं भी क्लिक करते हैं तो onBlur और onMenuClose दोनों सक्रिय हो जाएंगे। यदि आप Esc कुंजी दबाते हैं तो onMenuClose बिना onBlur के अकेले भी फायर कर सकते हैं, इसलिए आपको उस अतिरिक्त एज केस को संभालने के लिए अतिरिक्त तर्क लिखने की आवश्यकता होगी।

function MySelect() {
  const [value, setValue] = React.useState([]);
  const [inputValue, setInputValue] = React.useState("");
  const isInputPreviouslyBlurred = React.useRef(false);
  const createOptionFromInputValue = () => {
    if (!inputValue) return;
    setValue((v) => {
      return [...(v ? v : []), { label: inputValue, value: inputValue }];
    });
  };
  const onInputBlur = () => {
    isInputPreviouslyBlurred.current = true;
    createOptionFromInputValue();
  };
  const onMenuClose = () => {
    if (!isInputPreviouslyBlurred.current) {
      createOptionFromInputValue();
    }
    else {} // option's already been created from the input blur event. Skip.
    isInputPreviouslyBlurred.current = false;
  };
  return (
    <CreatableSelect
      isMulti
      value={value}
      onChange={setValue}
      inputValue={inputValue}
      onInputChange={setInputValue}
      options={options}
      onMenuClose={onMenuClose}
      onBlur={onInputBlur}
    />
  );
}

लाइव डेमो

Edit React - react-select Create New Option When Blur

1
NearHuscarl 15 सितंबर 2020, 16:57