Question

如何通过react-select async保持选定的选项？我的意思是，当我回到使用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)

    };

这是Async Dropdown组件，当在主视图中转到下一个视图并返回到缺少所选值的主视图时，使用此组件进入主视图，并显示placeHolder并再次调用loadOptions函数并调用API。该如何解决？

Answer 1

为了在单击/下一个或上一个时保留表单字段的值：

创建一个主要的表单组件，例如MasterForm，然后渲染表单步骤，例如，Step1和Step2（保存您的输入字段等）。
在value中维护select的{{1}}，并保持MasterForm和values的表单步骤。

我创建了一个working demo of react-select multi step form

MasterForm：

onChangeHandlers

Step1.js

...
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()}
      </>
    );
  }
  ...

注意：

您似乎没有在选择中使用搜索功能。因此，我想您可以简单地使用常规... <AsyncSelect cacheOptions loadOptions={this.loadOptions} defaultOptions onChange={this.props.handleChange} isRtl={true} isSearchable={false} classNamePrefix="myDropDown" placeholder={"(پیش فرض گروه فعال)"} value={this.props.value} ...并在componentDidMount中自行处理数据提取。请参阅我的code demo中的Select
如果您不想为所有重新渲染执行Step2函数，请考虑使用useMemo。请注意，useMemo在功能组件中可用

当更改视图缺少所选值时做出反应选择

1 个答案: