Material-ui: [TextField] 为文本字段添加图标道具

正如#3032 所指出的，它可能看起来像

#3038 我们应该能够在左侧和右侧添加一个图标。

也很高兴看到前缀和后缀

我想要这样的东西。 你在做这件事吗？

这个要多久才能发布？

我认为这也应该扩展到自动完成输入，会非常有用。

有没有办法添加带有 TextField 验证/错误的图标？

我认为这应该适用于所有“表单”字段，包括 SelectField。

我在 ListItem 或 MenuItem 中使用 TextField 来实现这一点。 在 ListItem 中放置一个 TextField 然后使用 leftIcon 或 rightIcon 道具来实现它。

我在 ListItem 或 MenuItem 中使用 TextField 来实现这一点。

我认为这是正确的方法。 我宁愿在TextField使用组合而不是附加逻辑。
但是，我想知道ListItem或MenuItem在设计时考虑到了这个用例。
我认为我们可以有一个更具体的组件来做到这一点。 就像一个<TextFieldIcon />

我认为最好的方法是将它放在看起来像ListItem如下所示： https: //material.google.com/components/text-fields.html#text -fields-single-line-文本域

也许将它作为与rightCheckbox类似的选项，然后是rightField ，并且可能支持给它一个最大值数组。 2 个元素，如TextField和/或SelectField ，如电话/日历示例中所示。

这可以节省大量空间，尤其是在移动设备上，而且很麻烦，不需要调整 css 就可以让它们全部对齐。

使用与 ListItem 嵌套的 Textfield 的问题是...除非我遗漏了一些东西，否则不可能在表单中切换到下一个 Textfield。

仅出于这个原因，最好有一个独立的正如@oliviertassinari所建议的，或者只是一个可以设置的附加道具 ，尽管后者似乎被#4027 劝阻。 有没有人找到工作的解决方法？

是否有解决原始问题的任何进展或临时解决方案？

@iamzhouyi尝试使用这样的东西来实现自动完成体验

<Menu disableAutoFocus>
  <MenuItem leftIcon={<SearchIcon color='#fff'/>} disabled>
    <AutoComplete hintText='Search' />
  </MenuItem>
</Menu> 

有人在这方面有任何进展吗？ 如果有人已经开始，我很乐意提供帮助，如果没有，我会自己试一试吗？

看起来不像@oshalygin ，请注意它已添加到 #6566 的清单中，因此可能想在那里跟踪进度！

将是一个很好的补充。

@oshalygin如果您要研究此问题，我建议您在next分支上工作-我们不会优先考虑master上的新功能。 此外，因为它是由可组合的组件组成的，所以您应该会发现它更容易。

我认为在文本字段中进行循环进度以实时检查文本字段值也会很棒。

哇，我看到这是 1.5 年前打开的！ 有任何更新吗？ 我已经尝试添加 CSS hacks (&before content) 哪种工作，但我需要更细粒度的控制，因为我需要进一步设置样式，让它根据状态消失或消失，更具体地说，在文本字段内. 也尝试使用 HintText/placeholder 摆弄，但所有这些都完全相互冲突和混乱。 😞

实现与文本字段相邻的图标的最简单方法是将字段和图标包装在一个可以包含绝对定位图标的 div 中。

<div style={{position: 'relative', display: 'inline-block'}}>
      <SearchIcon style={{position: 'absolute', right: 0, top: 15, width: 20, height: 20}}/>
      <TextField
           hintText="Search by Name"
           onChange={_.debounce((event, value) => this.handleSearch(value), 500)}
        />
</div>

如果你想要它在左边，只需在字段中添加一个 textIndent 并将定位更改为左边。

<div style={{position: 'relative', display: 'inline-block'}}>
       <SearchIcon style={{position: 'absolute', left: 0, top: 15, width: 20, height: 20}}/>
       <TextField
              style={{textIndent: 30}}
              hintText="Search by Name"
              onChange={_.debounce((event, value) => this.handleSearch(value), 500)}
        />
</div>

如果你想要动态图标，那么改变字段 onChange 方法来更新可以改变图标的​​状态。 如果你想让它更干净，你可以把它放在一个组件中，并称之为 IconTextField 就像 } ....其他属性/>

@bradrisse效果很好，感谢上帝，我阅读了整篇文章，在最后一条评论中找到了我正在寻找的答案

是否可以添加为道具？
_ 浮动标签文本='标签'
提示文本='提示文本'
errorText={ ${<MoreVertIcon />} Error Text }
多线
/>_

import ActionHome from 'material-ui/svg-icons/action/home';
<TextField
floatingLabelText={<SvgIconComponent/>}
floatingLabelFixed={true}
/>

// 带有图标的文本框
const IconTextField = (道具) => (

图标={“人”}
提示文本={道具.标签}
type={props.type ?
全宽={真}
/>

)

我相信这可以关闭，对吗？ https://material-ui-next.com/demos/text-fields/#input -adornments

@stunaz我不认为这是人们在这里要求的。

@oliviertassinari我在规范中唯一能看到的其他类型是“图标符号”：

图标符号

图标描述了文本字段所需的输入类型。 它们显示在文本字段的左侧。

似乎只需要几行代码就可以实现：

const styles = theme => ({
  icon: {
    margin: '20px 16px 0 0',
    color: theme.palette.action.active,
  },
});

[...]

<div>
    <Person className={classes.icon} />
    <TextField label="Name" />
</div>

文档中的示例是否允许我们关闭此问题？

@mbrookes我有个主意。 由于文本字段不是唯一需要图标装饰器的组件，也许我们可以制作一个包装器，将图标附加到元素上。

例子

对于文本字段

<IconDecorator icon={<PeopleIcon/>} position="left" iconStyle={customStyle}>
    <TextField label="Name"/>
</IconDecorator>

对于按钮

<IconDecorator icon={<ArrowRightIcon/>} position="right" iconStyle={customStyle}>
    <Button raised={true}>Go</Button>
</IconDecorator>

优势

该方法不会破坏或污染当前的API，因此不会有破坏性的变化。

关心

如果要实现这个IconDecorator是应该包含在这个库中还是另一个外部库中？

@wongjiahau我看到的一个困难是垂直对齐是特定于组件的，因此它必须检查它的子类型并适当调整其边距，但这可以实现。

如果要继续进行，那么将其作为 MUI 的一部分是有意义的。

@oliviertassinari很抱歉给您

这个好像还开着？ 它被踢了还是仍在寻求解决？

@BlakeBurnette这个问题是关于暴露一个特定的组件来处理这个问题案例。 鉴于以下两种选择，我不 💯 % 相信它是必要的。 有没有人想在文档中添加一个演示，以便我们可以关闭这个问题？

https://codesandbox.io/s/29yj0lr7p

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "material-ui/styles";
import Input, { InputLabel, InputAdornment } from "material-ui/Input";
import { FormControl } from "material-ui/Form";
import TextField from "material-ui/TextField";
import Grid from "material-ui/Grid";
import AccountCircle from "material-ui-icons/AccountCircle";

const styles = theme => ({
  margin: {
    margin: theme.spacing.unit
  }
});

function TextFieldIcons(props) {
  const { classes } = props;

  return (
    <div>
      <FormControl className={classes.margin}>
        <InputLabel htmlFor="demo1">First Name</InputLabel>
        <Input
          id="demo1"
          startAdornment={
            <InputAdornment position="start">
              <AccountCircle />
            </InputAdornment>
          }
        />
      </FormControl>
      <TextField
        className={classes.margin}
        id="demo2"
        label="First Name"
        InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <AccountCircle />
            </InputAdornment>
          )
        }}
      />
      <div className={classes.margin}>
        <Grid container spacing={8} alignItems="flex-end">
          <Grid item>
            <AccountCircle />
          </Grid>
          <Grid item>
            <TextField id="demo2" label="First Name" />
          </Grid>
        </Grid>
      </div>
    </div>
  );
}

TextFieldIcons.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(TextFieldIcons);