В версии хуков материального интерфейса я не могу очистить автозаполнение после события onChange:

// @flow
import React, { useRef, useState } from "react";
import "./Autocomplete.scss";
import AutocompleteUI from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";

function Autocomplete(props) {
    const { options } = props;
    const [value, setValue] = useState();

    const container = useRef();
    const input = useRef();

    function onChange(event, newValue) {
        if (!newValue) return;
        props.onChange(newValue);
        setValue(undefined);
        input.current.value = "";
        event.target.value = "";
    }

    function renderInput(params) {
        return (
            <TextField
                inputRef={input}
                {...params}
                inputProps={{
                    ...params.inputProps,
                    autoComplete: "disabled", // disable autocomplete and autofill
                }}
                margin="none"
                fullWidth
            />
        );
    }

    return (
        <div className="Autocomplete-container">
            {value}
            <AutocompleteUI
                ref={container}
                options={options}
                autoHightlight={true}
                clearOnEscape={true}
                autoSelect={true}
                // freeSolo={true}
                getOptionLabel={option => option.title}
                renderInput={renderInput}
                value={value}
                onChange={onChange}
            />
        </div>
    );
}

export default Autocomplete;

Погружение в исходный код Я заметил, что компонент использует useAutocomplete внутренне. Однако ни setInputValue , ни resetInputValue , которые находятся внутри этого хука, не отображаются снаружи. Есть ли способ выполнить очистку ввода после onChange?

9
Guy 30 Окт 2019 в 16:04
Под очисткой автозаполнения вы имеете в виду просто очистить поле ввода или удалить предложения?
 – 
Chris B.
30 Окт 2019 в 17:14
@ChrisB. Да, первое, я пытаюсь очистить поле ввода.
 – 
Guy
30 Окт 2019 в 17:39
По-видимому, он работает только с refs, что, на мой взгляд, является идиотским дизайном для многоразового компонента React. Вам нужно будет установить значение непосредственно в элементе DOM, но я не знаком с их API.
 – 
Chris B.
30 Окт 2019 в 18:05
1
@ChrisB. Я пробовал работать с refs и напрямую изменять входное значение, однако, поскольку сам компонент сохраняет состояние (через хук useAutocomplete), он не работает.
 – 
Guy
30 Окт 2019 в 18:08

5 ответов

Вам нужно установить опору inputValue для вашего valueState, а в функции onhange просто очистите valueState

<Autocomplete

inputValue={valueState}

onChange={(value, option) =>
{


    setOptions([])
    setValueState("")

}}

renderInput={params => (
    <TextField
        dir="rtl"
        onChange={(event) =>
        {

            setValueState(event.target.value)

        }}
        {...params}
        label="Search Patient"
        variant="filled"

        InputProps={{
            ...params.InputProps,
            endAdornment: (
                <React.Fragment>
                    {loading ? (
                        <CircularProgress color="inherit" size={20} />
                    ) : null}
                    {params.InputProps.endAdornment}
                </React.Fragment>
            )
        }}
    />
)}
/>
1
shehab khalid 11 Апр 2020 в 14:28

Эй! Я почти уверен, что компонент Textfield из материала принимает свойство «autoComplete», и вы можете передать ему строку «false». Кроме того, он не входит в inputProps, попробуйте это.

<Textfield autoComplete="false" />
0
mlisonek 30 Окт 2019 в 17:09
Вы, вероятно, имеете в виду автозаполнение браузеров. Мой вариант использования требует использования более надежного варианта, в котором я могу выбрать представленные варианты.
 – 
Guy
30 Окт 2019 в 17:16

Я столкнулся с аналогичным сценарием с использованием автозаполнения / текстового поля в панели поиска / навигации. Значение всегда останется после использования history.push или другой функции маршрутизатора в событии onChange. Уловка состоит в том, чтобы установить inputValue = "". Каждый раз при рендеринге компонента предыдущее значение будет удалено. См. ниже

<Autocomplete
  {...defaultProps}
  onChange={(event, value) => {
    if(value) 
      router.history.push(`/summary`);
  }}
  filterOptions={filterOptions}
  clearOnEscape={true}
  inputValue=""
  renderInput={params => <TextField {...params} 
                                    label="Quick Search"  fullWidth                            
                                    InputProps={{...params.InputProps, 
                                      'aria-label': 'description',
                                                disableUnderline: true, 
                           }}/>}
/>
0
fiidim 11 Дек 2019 в 04:56

У меня была такая же проблема, и я решил ее следующим образом:

    const [search, setSearch] = useState("");

...

     <Autocomplete
          id="grouped-demo"
          options={tagsList}
          getOptionLabel={(option) => option.tag}
          onChange={(event, value) =>value ? setSearch(value.tag) : setSearch(event.target.value)}
          style={{width: 700}}
          renderInput={(params) => <TextField {...params} label="Search" variant="outlined"/>}
     />
0
Ibrahima Dansoko 16 Апр 2020 в 10:40

У меня была такая же проблема, и я решил ее следующим образом:

const [value, setValue] = useState(null);

Тогда вам не нужно использовать ссылки.

-1
schaemi 18 Дек 2019 в 17:59