有什么方法可以使用材质 UI 根据文本字段名称呈现图标？

Question

<TextField  
 margin='dense'    
 fullWidth 
 value={this.props.value} 
 name={this.props.name}   
 type={this.props.type} 
 error={this.props.error !== ''}
 helperText={this.props.error !== '' ? this.props.error : ' '}
 onChange={ e => this.handleChange(e) }
 label={this.props.label} 
 variant= {this.props.variant}
 id={this.props.name}   
 InputProps={{
  endAdornment: (
   <AccountCircle />
  ),
 }}
/>

有没有办法根据文本字段名称显示不同的图标？我的意思是，如果名称是电子邮件，则显示 EmailIcon。如果配置文件则显示 AccountCircle。

Answer 1

这是一个简单的解决方案，因此您可以从这里开始

let icon = null; 
if (this.props.name === "Password") {
  icon = <Visibility />;
} else if (this.props.name === "Account") {
  icon = <AccountCircle />;
}
return (
  <div className={classes.root}>
    <TextField
      label={this.props.name}
      className={classNames(classes.margin, classes.textField)}
      InputProps={{
        endAdornment: icon
      }}
    />
  </div>
);

在这里，我将名称作为该组件中的道具，并根据该道具更改图标。如果你愿意，你可以改变它来切换。

希望你有想法。

这是演示的链接：https : //codesandbox.io/s/moo68122lp