我想创建具有选择属性但也能够在其中编写自定义文本的输入元素。我正在使用 React 和 Material-UI。
是否可以在 Material-UI 的 TextField 组件内(在输入下方的 div 内)添加元素。
目前:Usluga grupni Pos ....
添加元素:
<div class="MuiFormControl-root-142 ...>
<label class="MuiFormLabel-root-151 ...>Usluga</label>
<div class="MuiInput-root-156 ...>
<input aria-invalid="false" ... list="services" value="">
<datalist id="services">
<li tabindex="-1" ...>grupni<span class="MuiTouchRipple-root-82"></span>
</li>
<li tabindex="-1" ...>Pos<span class="MuiTouchRipple-root-82"></span>
</li>
....
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
目前反应:
<TextField
id="service"
label="Usluga"
className={classes.textField}
margin="normal"
onChange={handleChange}
inputProps={{
list: "services"
}}
/>
<datalist id="services">
{
services.map(option => (
<MenuItem key={option.id} value={option.service}>
{ option.service }
</MenuItem>
))
}
</datalist>
Run Code Online (Sandbox Code Playgroud)
如果这是不可能的,还有什么方法可以做到这一点?