Question

我尝试使用Material-UI文本字段的traceingIcon属性添加图标，但是找不到找到可点击图标的方法。

    <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单击。

Answer 1

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

此外，这里还有一个示例，说明如何使用InputProps完成此操作。您可以将onClick与IconButton组件一起使用。在“ here”文本框中找到了示例

      <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>
          ),
        }}
      />

如何允许Textfield TrailingIcon单击

1 个答案: