如何在 InputProps endAdornment 中添加新项目以保持功能 openPicker答案

【问题标题】：How can I add a new item in InputProps endAdornment keeping the functionality openPicker如何在 InputProps endAdornment 中添加新项目以保持功能 openPicker
【发布时间】：2022-10-24 10:47:00
【问题描述】：

如何在 InputProps endAdornment 中添加一个新项目，以保持 iconEvent 的功能（控制弹出窗口以设置日期的图标或项目（openPicker））。我试过这样

<DatePicker
  label="Date of baptism"
  openTo="year"
  views={["year", "month", "day"]}
  value={formik.values.dateOfBaptism}
  onChange={(value) => formik.setFieldValue("dateOfBaptism", value)}
  renderInput={(params) => (
      <TextField
        size="small"
        variant="filled"
        margin="none"
        fullWidth
        {...params}
        // InputProps={{ ...params.InputProps }}
        InputProps={{
          endAdornment: (
            <InputAdornment position="end">
                    //new item
              <IconButton edge="end">
                <ErrorOutline className="error" />
              </IconButton>

              //current item
              {...params.InputProps?.endAdornment}
            </InputAdornment>
          ),
        }}
        id="filled-adornment-dateOfBaptism"
        name="dateOfBaptism"
      />
  )}
/>;

我有以下参数道具：

{
  label: 'Date of baptism',
  disabled: undefined,
  ref: null,
  inputRef: undefined,
  error: true,
  InputProps: { readOnly: true },
  inputProps: {
    disabled: undefined,
    readOnly: true,
    'aria-readonly': true,
    'aria-label': 'Choose date',
    value: '',
    onClick: [Function: openPicker],
    onKeyDown: [Function (anonymous)]
  }
}

想法是这样的：

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

你很亲近！这对我有用（我的项目中的图标略有不同，解决了同样的问题）

renderInput={({ inputRef, inputProps, InputProps }) => (
  <TextField
    ref={inputRef}
    {...inputProps}
    InputProps={{
      ...InputProps,
      endAdornment: (
        <Stack direction="row" alignItems="center">
          <IconButton
            onClick={() => console.log("clear clicked")} // do stuff
            title="Clear"
          >
            <Clear />
          </IconButton>
          {InputProps?.endAdornment}
        </Stack>
      ),
    }}
  />
)}

【讨论】：