Любой способ визуализации Icon на основе имени текстового поля с использованием пользовательского интерфейса материала? - PullRequest
Новая
       6

Любой способ визуализации Icon на основе имени текстового поля с использованием пользовательского интерфейса материала?

0 голосов
/ 28 декабря 2018 
<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.

Ответы [ 2 ]

0 голосов
/ 28 декабря 2018

Вы можете сделать это элегантным способом, абстрагируясь так: 

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} />
      ),
     }}
   />
 );
0 голосов
/ 28 декабря 2018

вот простое решение, поэтому вы можете запустить его отсюда 

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

...