har*_*rdy 1 javascript reactjs material-ui
我正在使用 Select,在 React 的 Material UI 中,当我从选择器中选择时,我总是得到未定义的结果。当我们使用价值动态时,这种情况总是MenuItem
会发生。但如果我使用静态值而不是动态值,它效果很好。但我必须以动态方式与.map
运算符一起使用。
请提供在动态值方面效果良好的解决方案。
像这样-> <MenuItem value={SOME-DYNAMIC-VALUE} />
this.state.selectedTagetIdentity = '';
onTargetIdentityChange = (event) => {
this.setState({ selectedTagetIdentity: event.target.value }); // its undefined always
}
const splitedIdenties = {
'abc1' :[{ id: 12, age: '2' },{ id: 13, age: '3' }],
'abc2': [{ id: 14, age: '22' },{ id: 15, age: '25' }]
};
Run Code Online (Sandbox Code Playgroud)
<Select value={selectedTagetIdentity} onChange={onTargetIdentityChange}>
{Object.keys(splitedIdenties).map((identityTypeKey, identityTypeIndex) =>
<div key={identityTypeIndex}>
<ListSubheader>{identityTypeKey}</ListSubheader>
{splitedIdenties[identityTypeKey].map(identity =>
<MenuItem key={identity.id} value={identity.id}>{identity.age}</MenuItem>
)}
</div>
)}
</Select>
Run Code Online (Sandbox Code Playgroud)
看到这里,它不起作用
问题是你正在MenuItem
用div
. MenuItem
元素必须是material-ui的直接后代Select
:
\n\n\n\xe2\x9a\xa0\xef\xb8\x8f当native 为\n false 时,MenuItem 元素必须是直接后代。
\n
要解决这个问题,请删除包装 div:
\n\n<Select value={personName} onChange={onTargetIdentityChange}>\n {Object.keys(splitedIdenties).map((identityTypeKey, identityTypeIndex) =>{\n let children = [];\n\n children.push(<ListSubheader>{identityTypeKey}</ListSubheader>); \n splitedIdenties[identityTypeKey].forEach(identity => {\n children.push(<MenuItem key={identity.id} value={identity.id}>{identity.age}</MenuItem>)\n })\n\n return children;\n }\n )}\n</Select>\n
Run Code Online (Sandbox Code Playgroud)\n\n\n
归档时间: |
|
查看次数: |
3071 次 |
最近记录: |