具有动态值的 MenuItem 在 Material UI React 中不起作用

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)

看到这里,它不起作用

Ido*_*Ido 6

问题是你正在MenuItemdiv. MenuItem元素必须是material-ui的直接后代Select

\n\n
\n

\xe2\x9a\xa0\xef\xb8\x8f当native 为\n false 时,MenuItem 元素必须是直接后代。

\n
\n\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