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

有什么方法可以根据文本字段名称显示不同的图标？我的意思是，如果名称是Email，则显示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

Answer 2

您可以通过以下抽象方式以优雅的方式进行操作：

import { AccountCircle, UserIcon, PhoneIcon } from 'some/ui/library';

const icons = {
  account: AccountCircle,
  user: UserIcon,
  phone: PhoneIcon,
};

const FieldIcon = ({ name }) => {
  const Icon = icons[name];
  return Icon ? (<Icon />) : null;
};

const YourComponent = props => (
  <TextField  
     margin='dense'    
     fullWidth 
     value={props.value} 
     name={props.name}   
     type={props.type} 
     error={props.error !== ''}
     helperText={props.error !== '' ? props.error : ' '}
     label={props.label} 
     variant= {props.variant}
     id={props.name}   
     InputProps={{
      endAdornment: (
       <FieldIcon name={props.name} />
      ),
     }}
   />
 );

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

2 个答案: