Как сделать повторно используемый компонент TextField MUI v5 с условным украшением

Я пытаюсь создать гибкий и повторно используемый компонент MUI v5 TextField, но не ясно, как установить по умолчанию endAdornment или startAdornment на InputProps в зависимости от условия.

Предполагается, что TextField имеет несколько состояний:

  • По умолчанию - обычный ввод
  • Ошибка - если TextField имеет ошибку, то endAdornment следует добавить с определенной иконкой
  • Поиск - startAdornment следует добавить с определенной иконкой

На данный момент у меня есть только (и на самом деле я хочу, чтобы это работало так):

<StyledTextField
  error = {true}
/>

<StyledTextField
  someSearchProp = {true}
/>

Также я хочу сохранить возможность использовать TextField по умолчанию следующим образом:

<StyledTextField
  InputProps = {{
    startAdornment: (
      <InputAdornment position = "start">
        <SearchIcon />
      </InputAdornment>
    ),
  }}
/>

StyledTextField.tsx

const StyledTextField: React.FC<StyledTextFieldProps> = ({ ...props }) => (
  <TextField
    {...props}
    InputProps = {{
      endAdornment: (
        <InputAdornment position = "end">
          <InfoOutlinedIcon color = {'error'} />
        </InputAdornment>
      ),
    }}
  />
);

Ааа

Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]
[LXI-SpartaCodingClub Full-Stack Bootcamp in Indonesia] 2023/1/21 TIL/Week 15]
Я научился создавать карусель в ReactJS с помощью библиотеки Splide.
Краткое введение в Styled-компоненты
Краткое введение в Styled-компоненты
В настоящее время популярность Styled-компонентов становится все больше и больше. Большинство проектов, построенных на React.js, используют эту...
ДЕНЬ 8 | Страница обзора в React
ДЕНЬ 8 | Страница обзора в React
На этом сегодня все, завтра снова увидимся с новым проектом!
Как настроить среду разработки React.
Как настроить среду разработки React.
Весь процесс настройки среды разработки react.
0
0
86
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете распространять реквизиты и добавлять новое значение в ключ InputProps.

Вот так:

    const StyledTextField: React.FC<StyledTextFieldProps> = (props) => {
    
      let textFieldProps = props
    
    if (props.error){
      textFieldProps = {...props,InputProps:{
          startAdornment: (
            <InputAdornment position = "start">
              <SearchIcon />
            </InputAdornment>
          ),
        }}
      delete textFieldProps.error
    }else if (props.someSearchProp){
      textFieldProps = {...props,InputProps:{
          endAdornment: (
            <InputAdornment position = "end">
              <InfoOutlinedIcon color = {'error'} />
            </InputAdornment>
          )
        }}
      delete textFieldProps.someSearchProp
    }
    
   return ( <TextField
      {...textFieldProps}
    />)
   };

После присвоения значения я удаляю ошибку и некоторые свойства SearchProp, потому что они не являются реквизитами TextField и вызывают предупреждение в консоли

Другие вопросы по теме