如何从 React TextField 中删除箭头 Select

Question

我正在使用 TextField Select 作为下拉菜单。尝试在 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>

Answer 1

要删除 select 下拉图标，您必须在 SelectProps 中传递 IconComponent: () => null，Props 应用于 Select 元素。它接受 select 元素 props

的对象

有关select道具的更多信息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>

如何从 React TextField 中删除箭头 Select

How to remove arrow from React TextField Select

reactjs

react-select

material-ui