[英]How can I set the values of Select tag from react-select to a state
我正在嘗試設置當我收到來自“react-select”標簽的 select 多個值時收到的值。
目前它拋出未定義,當我從標簽中獲取 select 值時,我需要的 state 的結果是:
['user._id','user._id','user._id'.....] so on depends on how many user i select
這是我到目前為止所做的,但對我來說並不成功。
const [ selectedMembers , setSelectedMembers ] = useState<any>([]);
const [options, setOptions] = useState([{value: "", label: ""}]);
//In useEffect i am making API Call and received the values in **res.data.data**
//the options will be displayed in select tag ,
if(res.data.data){
let option: any = [];
res.data.data.map((admin, index) => {
option.push({value: admin._id, label: admin.displayName})
})
setOptions(option);
}
async function onChangeSelectedMembers(e){
console.log(e)
setSelectedMembers([...selectedMembers , e.value])
}
//outcome of console.log(e) when i select values from Select tag is [Note : its dynamic //if i remove any user or add more user it changes accordinly :
// 0: {value: '61dfcfb71f492f4f4f589e93', label: 'hello_1'}
// 1: {value: '61dedd23bd15322626dd7539', label: 'hello_2'}
//DISPLAY SELECT TAG WITH VALUES
return(
<label className="form-label">{intl.formatMessage({ id: 'SELECT.MEMBERS' })}</label>
<Select
className="form-select, form-select-solid, basic-multi-select"
isMulti
onChange={(e)=>onChangeSelectedMembers(e)}
options={options}
>
)
到目前為止,這是我的試用版,但我在selectedMembers中收到了“未定義”值。 誰能幫我這個? 將不勝感激! 謝謝 !
您需要修復您的 onChangeSelectedMembers function。請嘗試使用如下:
const [ selectedMembers , setSelectedMembers ] = useState<any[]>([]);
const [options, setOptions] = useState([{value: "", label: ""}]);
//In useEffect i am making API Call and received the values in **res.data.data**
//the options will be displayed in select tag ,
if(res.data.data){
let option: any[] = [];
res.data.data.map((admin, index) => {
option.push({value: admin._id, label: admin.displayName})
})
setOptions(option);
}
function onChangeSelectedMembers(opts){
console.log(opts)
setSelectedMembers(opts.map(opt => opt));
}
//outcome of console.log(e) when i select values from Select tag is [Note : its dynamic //if i remove any user or add more user it changes accordinly :
// 0: {value: '61dfcfb71f492f4f4f589e93', label: 'hello_1'}
// 1: {value: '61dedd23bd15322626dd7539', label: 'hello_2'}
//DISPLAY SELECT TAG WITH VALUES
return(
<label className="form-label">{intl.formatMessage({ id: 'SELECT.MEMBERS' })}</label>
<Select
className="form-select, form-select-solid, basic-multi-select"
isMulti
value={selectedMembers}
onChange={onChangeSelectedMembers}
options={options}
>
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.