在 React 的输入字段中插入 Material-UI 图标答案

【问题标题】：Insert Material-UI Icon into Input Field in React在 React 的输入字段中插入 Material-UI 图标
【发布时间】：2019-09-18 06:55:20
【问题描述】：

您好，我正在使用 Material-UI Datepickers 中的日期选择器。使用他们提供的内联日期选择器，我想在输入字段中插入一个日历图标。

这就是输入元素的样子。如何在此处的输入字段中添加 I con。这样它仍然显示在元素内部，单击它会激活输入字段，但不会破坏输入的值。

              <InlineDatePicker
                label={"Start Date"}
                value={startDate}
                format={"MMM Do YYYY"}
                onChange={(e) => {this.handleDateChange(e, 'start')}}
                className={styles.dateInput}
                minDate={this.getMinDate(true)}
                maxDate={this.getMaxDate(true)}
              />

【问题讨论】：

标签： html reactjs input icons material-ui

【解决方案1】：

我不确定您问题的确切答案，但这里有一个非常相关的材料-ui 日期选择器，您可以使用：https://codesandbox.io/s/yp4nr9nvkj

【讨论】：

不幸的是我需要使用material-ui库中的inlineDatepickers

【解决方案2】：

所以我发现您可以将道具传递到日期选择器的文本字段。因此，要实现我想要实现的目标，请禁用键盘模式并像这样设置内联 Datepicker

              <InlineDatePicker
                value={date}
                onChange={(e) => {this.handleDateChange(e)}}
                InputProps={{
                  endAdornment: (
                  <InputAdornment position={'end'}>
                    <Icon>
                      <CalendarToday />
                    </Icon>
                  </InputAdornment>)
                }}
              />

【讨论】：