Как предотвратить отправку запроса на получение, если длина поля запроса короткая в реакции-администратора - PullRequest
Новая
       12

Как предотвратить отправку запроса на получение, если длина поля запроса короткая в реакции-администратора

4 голосов
/ 11 марта 2019

Я использую response-admin и пытаюсь создать фильтр с полем автозаполнения, который будет выполнять запрос при наборе текста и отправлять запрос только тогда, когда длина критерия поиска превышает 2.

В настоящее время я использую shouldRenderSuggestions внутри моего поля AutocompleteInput, но при этом все равно отправляются два запроса с пустой строкой в ​​фильтре "псевдоним", это часть кода: 

<AutocompleteInput optionText="nickname" shouldRenderSuggestions={(val) => {
        return val.trim().length > 2
      }}/>

То, чтопроисходит, когда я заполняю первые и вторые буквы, отправляется запрос GET, но с пустой строкой в ​​поле nickname,

Например, ввод строки: "abc":

1-й запрос: http://website.loc/clients?filter={"nickname":""}&page=1&perPage=25&range=[0,24]&sort=["id","DESC"]

2-й запрос: http://website.loc/clients?filter={"nickname":""}&page=1&perPage=25&range=[0,24]&sort=["id","DESC"]

3-й запрос: http://website.loc/clients?filter={"nickname":"abc"}&page=1&perPage=25&range=[0,24]&sort=["id","DESC"]

Я хочу избежать отправки первых двух запросов полностью.

Полный код компонента: 

const PostPagination = props => (
  <Pagination rowsPerPageOptions={[]} {...props} />
);

const PostFilter = (props) => (
  <Filter {...props}>
    <ReferenceInput label="Client"
                    source="client_id"
                    reference="clients"
                    allowEmpty
                    filterToQuery={searchText => ({ nickname: searchText })}>
      <AutocompleteInput optionText="nickname" shouldRenderSuggestions={(val) => {
        return val.trim().length > 2
      }}/>
    </ReferenceInput>
  </Filter>
);

const PostsList = props => {
  return (
    <List {...props} perPage={15}
          pagination={<PostPagination/>}
          filters={<PostFilter/>}
          exporter={false}>
      <Datagrid>
        <TextField source="nickname" sortable={false}/>
        <DateField label="Created" source="created_at" showTime/>
      </Datagrid>
    </List>
  );
};

Редактировать: тот же вопрос касается полей "поиск по мере ввода", таких как <TextInput> внутриполе <<code>Filter>, я начал задавать новый вопрос, но понял, что это будет своего рода дубликат,

Это код, который также отправляет запросы, начиная с 1 символа, в этом случае даже нет опции shouldRenderSuggestions, чтобы заставить отправлять пустые запросы 

const ClientFilter = (props) => (
  <Filter {...props}>
    <TextInput label="Search" source="str" alwaysOn/>
  </Filter>
);

Живой пример кода в codesandbox.io

...