реагировать на выбор, если в окне изменения отсутствует выбранное значение - PullRequest
Новая
       11

реагировать на выбор, если в окне изменения отсутствует выбранное значение

1 голос
/ 22 апреля 2020

Как я могу сохранить выбранные параметры, реагируя на выбор asyn c? Что я имею в виду, у меня есть следующий компонент, который находится внутри формы с несколькими шагами, когда я возвращаюсь к той части, где я использую AsyncSelect, я вижу заполнитель и параметры загрузки снова запускаются (получить все значения из API) выбранных значений. как сохранить выбранное значение. это мой AsyncDropDown. js: 

<AsyncSelect
            styles={customStyles}
            cacheOptions
            loadOptions={loadOptions}
            defaultOptions
            onChange={handleChange}
            isRtl={true}
            isSearchable={false}
            classNamePrefix='myDropDown'
            placeholder={'(پیش فرض گروه فعال)'}
        />

и эта loadOtions функция: 

const loadOptions = (selectedOption, callback) => {
        let token = localStorage.getItem('Token')
        let udid = localStorage.getItem('UUID')
        let xml = `body of request`;
        axios.post('myurl.com', xml, { headers: { 'Content-Type': 'text/xml;charset=UTF-8' } }).then(function (response) {
            //console.log(response)
            var options = {
                attributeNamePrefix: "@_",
                attrNodeName: "attr", //default is 'false'
                textNodeName: "#text",
                ignoreAttributes: true,
                ignoreNameSpace: false,
                allowBooleanAttributes: false,
                parseNodeValue: true,
                parseAttributeValue: false,
                trimValues: true,
                cdataTagName: "__cdata", //default is 'false'
                cdataPositionChar: "\\c",
                localeRange: "", //To support non english character in tag/attribute values.
                parseTrueNumberOnly: false,
                attrValueProcessor: a => he.decode(a, { isAttributeValue: true }),//default is a=>a
                tagValueProcessor: a => he.decode(a) //default is a=>a
            };
            // Intermediate obj
            var tObj = parser.getTraversalObj(response.data, options);
            var jsonObj = parser.convertToJson(tObj, options);

            if (jsonObj["soap:Envelope"]["soap:Body"].GetAllCategoriesResponse.GetAllCategoriesResult["diffgr:diffgram"].DocumentElement != null) {
                var jsonDropDownDetails = jsonObj["soap:Envelope"]["soap:Body"].GetAllCategoriesResponse.GetAllCategoriesResult["diffgr:diffgram"].DocumentElement.CATEGORY
                jsonDropDownDetails.map(item => {
                    const data = { value: item.CATEGORYNAME, label: item.CATEGORYNAME, index: item.CATEGORYID }
                    setDropDownOptions(dropDownOptions.push(data))
                })
                callback(dropDownOptions)
            }
            setIsLoading(false)
        }).catch(function (error) {
            console.log("erorr in DropDown : " + error)
        })
    };

и это handelChange функция: 

   const handleChange = selectedOption => {
        setSelectedOption(selectedOption)
        props.parentCallBack(selectedOption)

    };

это Asyn c Компонент Dropdown использует этот компонент в главном представлении, когда в главном представлении go, чтобы перейти к следующему представлению и вернуться к главному представлению, пропуская выбранное значение, и показать функцию placeHolder и снова вызвать функцию loadOptions и вызвать API , как решить эту проблему?

1 Ответ

0 голосов
/ 23 апреля 2020

Чтобы сохранить значения полей формы при нажатии / следующем или предыдущем:

  • Создайте основной компонент формы, скажем, MasterForm, и визуализируйте шаги формы, скажем, Step1 и Step2 (который содержит поля ввода и т. Д. c).
  • Поддерживайте value вашего select в MasterForm и values и onChangeHandlers шагов формы.

Я создал рабочую демонстрацию многоэтапной формы реагирования и выбора

MasterForm: 

...
render() {
    return (
      <>
        <Step1
          value={this.state.step1SelectValue}
          handleChange={e => {
            this.setState({ step1SelectValue: e });
          }}
          currentStep={this.state.currentStep}
        />
        <Step2
          value={this.state.step2SelectValue}
          handleChange={e => {
            this.setState({ step2SelectValue: e });
          }}
          currentStep={this.state.currentStep}
        />
        {this.previousButton()}
        {this.nextButton()}
      </>
    );
  }
  ...

Step1. js

...
<AsyncSelect
          cacheOptions
          loadOptions={this.loadOptions}
          defaultOptions
          onChange={this.props.handleChange}
          isRtl={true}
          isSearchable={false}
          classNamePrefix="myDropDown"
          placeholder={"(پیش فرض گروه فعال)"}
          value={this.props.value}
...

Примечание:

  • Вы, кажется, не используете функцию поиска в своем выборе. Поэтому я думаю, что вы можете просто использовать обычный Select и самостоятельно обрабатывать выборку данных в componentDidMount. См. Step2 в моей кодовой демонстрации
  • Если вы не хотите выполнять функцию loadOptions для всех повторных рендеров, рассмотрите возможность использования useMemo . Обратите внимание, что useMemo доступен в функциональных компонентах
...