Добавьте кнопку в конце параметров автозаполнения в Material-UI

Я пытаюсь создать компонент автозаполнения, который человек будет использовать для выбора элемента из списка элементов, я сделал это, без проблем.

Проблема в том, что я также хочу добавить кнопку в конце списка (например, последний элемент в списке, который всегда присутствует), чтобы, если элемент, который ищет человек, не существует, человек мог щелкнуть эту кнопку чтобы добавить новый элемент. Это тот же вопрос, и на него есть ответ, но для response-select я не могу найти ничего в API material-ui, чтобы сделать то же самое. Добавить кнопку в конце параметров в реакции -выбрать

Пример (взятый из вопроса выше): https://i.stack.imgur.com/WRFd8.png

Я попытался добавить onClick в TextField, но, конечно, он срабатывает, как только кто-то нажимает на автозаполнение

  <Autocomplete
    id="supplierIdd"
    style={{ width: 300 }}
    options={suppliers.map((supplier) => supplier.name)}
    renderInput={(params) => 
      <>
        <TextField {...params} label="Булстат" margin="normal" onClick={()=>{console.log("hi")}} variant="outlined" />
      </>
    }
  />

Я также пробовал добавить в массив опций, но, конечно, это массив только опций, а не элементов, так куда бы мне добавить какой-нибудь элемент?


reactjs material-ui
person Darkbound    schedule 11.01.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел решение. Вы можете использовать метод filterOptions, чтобы добавить новую кнопку внизу.

Проверь это::

<Autocomplete
    id="supplierIdd"
    style={{ width: 300 }}
    options={suppliers.map((supplier) => supplier.name)}
    renderInput={(params) => 
      <>
        <TextField {...params} label="Булстат" margin="normal" onClick={()=>{console.log("hi")}} variant="outlined" />
      </>
    }
    filterOptions={(options) => {
          const result = [...options]
          result.push(
            ((
              <Button
                variant="outlined"
                color="primary"
                onMouseDown={onAddNew}
              >
               + Add New
              </Button>
            ) as unknown) as string,  // typecasting required for typescript
          )

          return result
        }}

      />
person Madhuri    schedule 22.04.2021