我有一个功能性的React组件,该组件呈现了几个可以正常工作的语义UI反应的Dropdown组件,唯一的例外是我无法让它们显示默认值以外的值。 App\User::all()->get(1)->userable;
有效,options
有效,但值无效。我的onChange
调用redux动作来更新状态,该状态会正确地传递回我的组件。
TeamSelector.js:
onChange
如果我登录import React from 'react'
import { Dropdown } from 'semantic-ui-react'
export default props => (
<div className="choose-team">
<span className="team-label">Home</span>
<Dropdown
className="team-select-home"
onChange={(_, data) => props.setHomeTeam(data.value)}
options={props.availableTeams}
placeholder={'Select Team'}
search
selection
value={props.homeTeam} />
{/* another Dropdown here */}
</div>
)
,我会得到期望的值,但这不会显示在我的下拉菜单中。我使用不正确吗?我已经检查了官方文档,但找不到任何使用prop作为值的示例,仅是React状态。
编辑
根据要求,props.homeTeam
道具的格式为:
availableTeams
我的减速器使用团队的[
{ label: 'England', value: 'England' },
{ label: 'Brazil', value: 'Brazil' },
// more in array
]
并将其设置为状态字符串,然后在value
上作为homeTeam
传递。因此,我知道props
和options
可以按预期工作,但是从默认值更改后,下拉列表中什么也不显示。
编辑2
组队的减速器功能:
onChange