时间戳

首页 > 解决方案 > 如何允许 Textfield trailingIcon 可点击

material-ui - 如何允许 Textfield trailingIcon 可点击

问题描述

我尝试使用 Material-UI Textfield trailingIcon 属性添加图标，但我找不到使图标可点击的方法。

    <TextField
      outlined
      name="add name"
      className={styles.textField}
      placeholder={'Add Name')}  
      value={name}
      invalid={false}
      trailingIcon={{ icon: 'clear', tabIndex: -1 }}
      onChange={handleChange}
      onBlur={handleBlur}
      onClick={handleClick)}
    />

我很高兴知道除了使用 Formik 这种附加库之外，是否有任何默认方法可以使 TextField trailingIcon 单击。

标签： material-ui

解决方案

该道具trailingIcon在 TextField 组件的 API 中不存在。

除此之外，这是一个如何使用InputProps. 您可以将 onClick 与 IconButton 组件结合使用。在“文本字段装饰”下找到的示例

      <TextField
        id="filled-adornment-password"
        className={clsx(classes.margin, classes.textField)}
        variant="filled"
        type={values.showPassword ? 'text' : 'password'}
        label="Password"
        value={values.password}
        onChange={handleChange('password')}
        InputProps={{
          endAdornment: (
            <InputAdornment position="end">
              <IconButton
                edge="end"
                aria-label="Toggle password visibility"
                onClick={handleClickShowPassword}
              >
                {values.showPassword ? <VisibilityOff /> : <Visibility />}
              </IconButton>
            </InputAdornment>
          ),
        }}
      />

推荐阅读