reactjs - 更改视图缺少选定值时的反应选择
问题描述
如何通过 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)
};
这是异步下拉组件在主视图中使用此组件到主视图时转到下一个视图并返回到缺少选定值的主视图并显示 placeHolder 并再次调用 loadOptions 函数并调用 API。如何解决这个问题?
解决方案
为了在单击/下一个或上一个时保留表单字段的值:
- 创建一个主表单组件 say
MasterForm
and 并渲染表单步骤 sayStep1
andStep2
(其中包含您的输入字段等)。 - 维护
value
您的select
inMasterForm
和 thevalues
和onChangeHandlers
form 步骤。
我创建了一个反应选择多步骤表单的工作演示
主表格:
...
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}
...
笔记:
推荐阅读
- dotnetnuke - DNN 9 修改角色
- java - 创建数据并将数据附加到 spark graphx java
- vba - vba - 重新调整二维数组并尝试查找数组第二个的长度
- r - 使用行名作为标识符替换多个值
- java - 测试 Camel 应用程序时如何模拟 Amazon SQS 终端节点
- javafx - JavaFX - 垂直手风琴
- node.js - 如何将事件发射器用作异步生成器
- java - 如何在 Netbeans 中使用 Gradle 创建 Spring 项目
- node.js - 即使响应正确,使用 supertest 和 jest 测试 API 错误也会失败
- java - Gradle:无法解析 org.sonarsource.scanner.api:sonar-scanner-api:2.6