我有一个react-select组件,我定义如下:
<Select
id="portf"
options={opts}
onChange={value => portfolioSelector(value)}
placeholder="Select Portfolio"
/>
opts = [{label: any, value:1}, {label:Two, value:2}]
。
选择的值通过portfolioSelector
函数存储在状态中。问题是,当我选择一个值时,它不会显示在选择字段中。我的主要内容是:
const PortfolioSelector = ({
opts,
portfolioSelector
}) => {
if (opts) {
return (
<div className="portfolio select-box">
<label htmlFor="selectBox" className="select-box__label">
Portfolio
</label>
<div className="select-box__container">
<Select
id="portf"
options={opts}
onChange={value => portfolioSelector(value)}
placeholder="Select Portfolio"
/>
</div>
<div className="separator" />
</div>
);
}
return (
<div>Loading</div>
);
};
你知道为什么吗?
答案 0 :(得分:3)
for (i in 1:nrow(Calendar)){
Calendar$'HourSpent' <- ifelse(Calendar$Week == Test$Group.1,
(Calendar$Hours/Test$x)*0.79,
0)
}
value 属性需要形状数组。
答案 1 :(得分:2)
首先是你创建了错误的数组,如果标签:any或Two是字符串,你必须添加双引号。 看看这个:
opts = [{label: "any", value:1}, {label:"Two", value:2}]
第二,你必须记住在这种情况下的选项是opts是一个具有标签和值的对象数组,你想要添加到你的状态的数据是什么?
<Select
id="portf"
options={opts}
onChange={value => portfolioSelector(value.value /* or if you want to add label*/ value.label)}
placeholder="Select Portfolio"
/>
答案 2 :(得分:2)
这是我使用的替代解决方案。
演示:https://codesandbox.io/s/github/mkaya95/React-Select_Set_Value_Example
import React, { useState } from "react";
import Select from "react-select";
export default function App() {
const [selectedOption, setSelectedOption] = useState("none");
const options = [
{ value: "none", label: "Empty" },
{ value: "left", label: "Open Left" },
{ value: "right", label: "Open Right" },
{
value: "tilt,left",
label: "Tilf and Open Left"
},
{
value: "tilt,right",
label: "Tilf and Open Right"
}
];
const handleTypeSelect = e => {
setSelectedOption(e.value);
};
return (
<div>
<Select
options={options}
onChange={handleTypeSelect}
value={options.filter(function(option) {
return option.value === selectedOption;
})}
label="Single select"
/>
</div>
);
}
答案 3 :(得分:0)
I fixed it. 你忘记了增值属性。使用它,检查工作代码:
const opts = [{ label: 'any', value: 1 }, { label: 'Two', value: 2 }];
const PortfolioSelector = ({ options }) => {
if (options) {
return (
<div className="portfolio select-box">
<label htmlFor="selectBox" className="select-box__label">
Portfolio
</label>
<div className="select-box__container">
<Select
id="portf"
options={options}
value={this.state.opts1}
onChange={value => this.setState({ opts1: value })}
placeholder="Select Portfolio" />
</div>
<div className="separator" />
</div>
);
}
return <div>Loading</div>;
};
并调用您的组件
<PortfolioSelector options={opts} />
答案 4 :(得分:0)
这是我的解决方案
演示:https://codesandbox.io/s/prod-rgb-o5svh?file=/src/App.js
代码:
import axios from 'axios'
import {useEffect, useState} from 'react'
import Select from 'react-select'
import "./styles.css";
export default function App() {
const [users, setUsers] = useState()
const [userId, setUserId] = useState()
useEffect(()=>{
const getUsers = async () => {
const {data} = await axios.get('https://jsonplaceholder.typicode.com/users')
setUsers(data)
}
getUsers()
},[])
const options = users && users.map(user =>{
return {label: user.name, value: user.id}
})
console.log(userId)
return (
<div className="App">
{users && (
<Select
placeholder='Select user...'
isSearchable
value={options.label}
options={options}
onChange={(option) => setUserId(option.value) }
/>
)}
</div>
)
}
答案 5 :(得分:0)
您可以简单地将 value 属性设为 Selected.label
value={selectedOption.label}
答案 6 :(得分:-4)
opts = [{label: any, value:1}, {label:Two, value:2}]
值必须是字符串。