[英]React Select defaultValue is set but doesn't appear
I've tried even manually setting the default values like in the documentation but no dice.我什至尝试过手动设置文档中的默认值,但没有骰子。 I'm not sure if it's a styling issue or what.
我不确定这是样式问题还是什么。 So below I posted what I have along with a screenshot.
所以在下面我发布了我所拥有的以及截图。
<Select
components={animatedComponents}
getOptionLabel={convertToLabel}
getOptionValue={option => option.resource_name}
isMulti
onChange={changeEvent}
options={users}
theme={theme => ({
...theme,
borderRadius: 0
})}
defaultValue={(props.value || []).map(convertToValue)}
value={(props.value || []).map(convertToValue)}
/>
convertToValue
function convertToValue
函数
const convertToValue = props => {
return {
label: `${props.name} ${props.family_name}`,
value: props.resource_name
};
};
convertToLabel function convertToLabel 函数
const convertToLabel = props => {
return `${props.name} ${props.family_name}`;
};
changeEvent
function changeEvent
函数
const changeEvent = (selectedOption, i) => {
let option = {
name: "reviewers",
value: selectedOption
};
update({ target: option });
};
users & props objects用户和道具对象
users:
[
{
resource_name: "facebook_user1",
name: "Joe",
family_name: "Dirt"
},
{
resource_name: "facebook_user2",
name: "Trident",
family_name: "White"
}
]
props:
{
field: "placeholder",
fieldType: "placeholderType"
value:[
{
resource_name: "facebook_user1",
name: "Joe",
family_name: "Dirt"
},
{
resource_name: "facebook_user2",
name: "Trident",
family_name: "White"
}
]
}
What I see on my screen.我在屏幕上看到的。
It is extremely difficult to tell exactly what your issue is, without seeing the actual JSX of your select render.如果没有看到选择渲染的实际 JSX,就很难准确地说出您的问题是什么。 Here are a few issues I see, looking at your question, and some hard guesses at what might be happening.
以下是我看到的一些问题,查看您的问题,以及对可能发生的事情的一些艰难猜测。
defaultValue
prop looks like, but remember that value
is expected to be equal to one of your option
s, not just an option
'value'defaultValue
道具是什么样子,但请记住, value
应该等于您的option
之一,而不仅仅是option
“价值”getOptionLabel = (option) => string
and getOptionValue = (option) => string
.getOptionLabel = (option) => string
和getOptionValue = (option) => string
。 You've used props
, which might conflict with parent scope, in your instance.props
,这可能与父作用域冲突。convertToValue
method signature to line up with those as well.convertToValue
方法签名也与这些一致。onChange
event method signature doesn't line up with React-Select, and may be causing you pain.onChange
事件方法签名与 React-Select 不一致,可能会让您感到痛苦。 See my answer to this recent question for help on this.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.