Как очистить ввод автозаполнения в Material-ui после onChange? - PullRequest
Новая
       29

Как очистить ввод автозаполнения в Material-ui после onChange?

0 голосов
/ 30 октября 2019

В версии ловушек пользовательского интерфейса материала Кажется, я не могу очистить автозаполнение после события 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 hook внутри. Однако ни setInputValue , ни resetInputValue , которые находятся внутри этого крючка, не выставляются наружу. Есть ли способ выполнить очистку ввода после onChange?

1 Ответ

0 голосов
/ 30 октября 2019

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

<Textfield autoComplete="false" />
...