Question

我想创建将具有select属性但也能够在其中写入自定义文本的输入元素。我正在使用React和Material-UI。

是否可以在Material-UI中的TextField组件内（在输入下方的div内）添加元素。

当前：乌斯卢加格鲁普尼位置 ....

添加了元素：

<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>

当前反应：

<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>

如果不可能的话，还有什么其他方法可以做到这一点？

Answer 1

您可以这样操作：InputProps={ endAdornment: <YourComponent /> }

https://material-ui.com/api/input/

Answer 2

是的，恐怕您需要其他工具才能为您完成这项工作。

您是否考虑过使用react-select？

Answer 3

您可以尝试此方法，它对我有用：）

<TextField
  required
  id='password'
  label='Password'
  onChange={handleOnChange}
  type={toggle.passwordVisibility ? 'text' : 'password'}
  InputProps={{
    endAdornment: (
      <InputAdornment position='end'>
        <IconButton
          aria-label='toggle password visibility'
          onClick={handlePasswordVisibility}
          onMouseDown={handleMouseDownPassword}>
          {toggle.passwordVisibility && <Visibility />}
          {!toggle.passwordVisibility && <VisibilityOff />}
        </IconButton>
      </InputAdornment>
    ),
  }}
/>

Answer 4

您可以尝试此方法，它对我有用：）

 <TextField
          variant="outlined"
          name="rfc"
          size={'small'}
          label="RFC"
          InputProps={{
                endAdornment: (
                 <datalist id="rfc">
                     <option value="XAXX010101000"></option>
                    <option value="XEXX010101000"></option>                          
                </datalist>
                ),
                inputProps: {
                      list: "rfc"
                }
             }}
             
    />

在TextField组件内添加元素-材质UI

4 个答案: