时间戳

首页 > 解决方案 > 如何从 React TextField Select 中删除箭头

reactjs - 如何从 React TextField Select 中删除箭头

问题描述

我正在使用 TextField Select 作为下拉菜单。尝试在选择时使用“components={{ DropdownIndicator:() => null}}”，但没有奏效。

        <TextField disabled={true}                           
           label="itemNo"
           value={currentItem.itemNo}
           variant="outlined"
           InputLabelProps={{ style: { fontSize: 18, color: 'grey', backgroundColor: 'white', fontFamily: "monospace" }, shrink: true }}
           select
         >
                {this.state.itemNo && this.state.itemNo.map((item) => (
                    <MenuItem style={{ fontSize: 14, fontFamily: "monospace" }} key={item.key} value={item.id}>
                        {item.key}
                </MenuItem>
            ))}
       </TextField>

标签： reactjsmaterial-uireact-select

解决方案

要删除选择下拉图标，您必须传入IconComponent: () => null, SelectPropsProps 应用于 Select 元素。它接受选择元素道具的对象

有关select's props的更多信息https://material-ui.com/api/select/

这是工作示例https://codesandbox.io/s/quizzical-frost-g4s52?file=/src/App.js

<TextField disabled={true}                           
           label="itemNo"
           value={currentItem.itemNo}
           variant="outlined"
           InputLabelProps={{ style: { fontSize: 18, color: 'grey', backgroundColor: 'white', fontFamily: "monospace" }, shrink: true }}
           select
          // for passing props in select component
           SelectProps={{ IconComponent: () => null }}
         >
                {this.state.itemNo && this.state.itemNo.map((item) => (
                    <MenuItem style={{ fontSize: 14, fontFamily: "monospace" }} key={item.key} value={item.id}>
                        {item.key}
                </MenuItem>
            ))}
       </TextField>

推荐阅读