material-ui 相关问题

我有以下自动完成组件：我有以下 Autocomplete 组件： <Autocomplete options={channels} autoHighlight multiple disableCloseOnSelect value={form.channel_ids} getOptionLabel={option => option.name} onChange={(event, value) => updateForm({...form, channel_ids: value?.map(channel => channel.id)})} renderInput={params => <TextField {...params} label="Channels" error={!!errors?.channel_ids} helperText={errors?.channel_ids?.[0]} /> } isOptionEqualToValue={(option, value) => option.id === value} renderOption={(props, option, {selected}) => <li {...props}> <Checkbox icon={<Icon path={mdiCheckboxBlankOutline} size={1} />} checkedIcon={<Icon path={mdiCheckboxMarked} size={1} />} style={{marginRight: 8}} checked={selected} /> {option.name} </li> } /> 通道数组： [ {id: 1, name: 'Example 1'}, {id: 2, name: 'Example 2'} ] 到目前为止，一切正常：它显示带有复选框的选项；它会检查复选框；它呈现选项标签；不起作用的是它与 value 和 options 不匹配。我希望自动完成功能使用对象数组作为选项，但返回所选 id 的一维数组。例如 [1]、[2] 或 [1, 2]。我希望有人能帮助我。预先感谢。长话短说，不可能立即做到这一点。我阅读了该组件的文档，这是不可能的。然而，我可以向您建议的是保留一个外部映射，以一种变通的方式执行映射 ID 组件。 const options = new Map(channels.map((channel) => ([channel.id, channel]))) // Since the option is mapped from the id the empty string will never be picked const getOptionName = (option: string) => options.get(option)?.name ?? '' <Autocomplete options={Array.from(options.keys())} // Modified autoHighlight multiple disableCloseOnSelect value={form.channel_ids} getOptionLabel={getOptionName} // Modified onChange={(event, value) => updateForm({...form, channel_ids: value})} // Modified renderInput={params => <TextField {...params} label="Channels" error={!!errors?.channel_ids} helperText={errors?.channel_ids?.[0]} /> } isOptionEqualToValue={(option, value) => option.id === value} renderOption={(props, option, {selected}) => <li {...props}> <Checkbox icon={<Icon path={mdiCheckboxBlankOutline} size={1} />} checkedIcon={<Icon path={mdiCheckboxMarked} size={1} />} style={{marginRight: 8}} checked={selected} /> {getOptionName(option)} // Modified </li> } /> 注意：如果您认为地图的计算在时间上太昂贵，您可以随时使用备忘录。 const options = useMemo(() => new Map(channels.map((channel) => ([channel.id, channel]))),[channels])

reactjs react-hooks material-ui mui-autocomplete

回答 1 投票 0

解决 NPM 中构建的对等依赖关系

我花了一天时间试图解决一些同伴依赖性问题。在开发模式下一切运行良好，但是当我构建时，我收到诸如“错误 TS2786：'图表'不能用作 JSX

reactjs node.js npm material-ui vite

回答 1 投票 0

如何从 Material UI 中删除默认的 Button 类并使用我自己的 css 类

我是 React 和 Material UI 的新手。我正在使用材质 UI 按钮，我想删除默认按钮类 (MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-buttonCss-3)。我想用...

reactjs material-ui

回答 2 投票 0

如何在reactjs中添加google play商店按钮

我想在我的网站中添加 google play store 按钮。我正在使用reactjs 和material-ui。我尝试在网上搜索但没有找到任何帮助。我是reactjs的初学者，有人可以帮助我吗？