如何在 react-select 异步中取回值 select
how to get back value select in react-select Async
我用 react-select
创建了一个异步 select。我可以显示从 API 获得的值。但是当用户 select 其中之一时,如何找到哪个是 selected。
这是 loadOptions
方法:
const loadOptions = (selectedOption, callback) => {
let xml = `my xml data`;
axios.post('test.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)
}
}).catch(function (error) {
console.log("erorr in DropDown : " + error)
})
};
这是我的 handelChange
方法:
const handleChange = selectedOption => {
console.log(selectedOption)
};
这是我的 AsyncSelect:
<AsyncSelect
styles={customStyles}
cacheOptions
loadOptions={loadOptions}
defaultOptions
onInputChange={handleChange}
isRtl={true}
isSearchable={false}
classNamePrefix='myDropDown'
/>
如何回调哪个值是 selected?
在不更改处理程序的情况下将 onInputChange
更改为 onChange
,selectedOption
现在应该可以工作了
onChange={handleChange}
我用 react-select
创建了一个异步 select。我可以显示从 API 获得的值。但是当用户 select 其中之一时,如何找到哪个是 selected。
这是 loadOptions
方法:
const loadOptions = (selectedOption, callback) => {
let xml = `my xml data`;
axios.post('test.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)
}
}).catch(function (error) {
console.log("erorr in DropDown : " + error)
})
};
这是我的 handelChange
方法:
const handleChange = selectedOption => {
console.log(selectedOption)
};
这是我的 AsyncSelect:
<AsyncSelect
styles={customStyles}
cacheOptions
loadOptions={loadOptions}
defaultOptions
onInputChange={handleChange}
isRtl={true}
isSearchable={false}
classNamePrefix='myDropDown'
/>
如何回调哪个值是 selected?
在不更改处理程序的情况下将 onInputChange
更改为 onChange
,selectedOption
现在应该可以工作了
onChange={handleChange}