我使用Material-UI制作了一个多选列表。但是,当我选择一个项目时,标签应缩小并适合输入字段的轮廓。问题是轮廓保持不变,标签在其后面缩小。
我尝试在Material-UI文档中寻找解决方案。似乎没有任何多个选择列表概述的变体。因此,我想知道这是因为没有多选列表的概述变体,还是由于其他原因。
<FormControl
variant="outlined"
fullWidth
>
<InputLabel
ref={ref => {
this.InputLabelRef = ref;
}}
htmlFor="members"
error={this.props.touched.members && Boolean(this.props.errors.members)}
>
Members
</InputLabel>
<Select
onChange={this.change.bind(null, "members")}
multiple
value={this.state.members}
error={this.props.touched.members && Boolean(this.props.errors.members)}
input={
<OutlinedInput
labelWidth={0}
name="members"
id="members"
/>
}
>
<MenuItem value={'Baspa'}>Baspa</MenuItem>
<MenuItem value={'Plorky'}>Plorky</MenuItem>
<MenuItem value={'Rizzels'}>Rizzels</MenuItem>
</Select>
我还制作了一个CodeSandBox: https://codesandbox.io/s/jnlx1vky39
它是这样的: