如何允许 Textfield trailingIcon 可点击

【问题标题】：How to allow a Textfield trailingIcon clickable如何允许 Textfield trailingIcon 可点击
【发布时间】：2019-09-07 22:08:41
【问题描述】：

我尝试使用 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 属性。你确定你使用的是material-ui组件吗？
它确实显示了 trailingIcon。
没错，我试图点击 SVG 而不是 Material UI 组件。

标签： material-ui

【解决方案1】：

TextField 组件的 API 中不存在 trailingIcon 属性。

除此之外，这里还有一个示例，说明如何使用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>
          ),
        }}
      />

【讨论】：