Обработка изменения компонента автозаполнения из пользовательского интерфейса материала

Я хочу использовать Autocompleteкомпонент для ввода тегов. Я пытаюсь получить теги и сохранить их в состоянии, чтобы потом можно было сохранить их в базе данных. Я использую функции вместо классов в реакции. Я пытался onChange, но я не получил никакого результата.

<div style={{ width: 500 }}>
    <Autocomplete
        multiple
        options={autoComplete}
        filterSelectedOptions
        getOptionLabel={option => option.tags}
        renderInput={params => (<TextField
                className={classes.input}
                {...params}
                variant="outlined"
                placeholder="Favorites"
                margin="normal"
                fullWidth />)} />

Как уже упоминал Юки, убедитесь, что вы onChangeправильно использовали эту функцию. Он получает два параметра. Согласно документации:

Подпись : function(event: object, value: any) => void.

event: Источник события обратного вызова

value: null (Значение / значения в компоненте автозаполнения).

Вот пример:

import React from 'react';
import Chip from '@material-ui/core/Chip';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';

export default class Tags extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tags: []
    };
    this.onTagsChange = this.onTagsChange.bind(this);
  }

  onTagsChange = (event, values) => {
    this.setState({
      tags: values
    }, () => {
      // This will output an array of objects
      // given by Autocompelte options property.
      console.log(this.state.tags);
    });
  }

  render() {
    return (
      <div style={{ width: 500 }}>
        <Autocomplete
          multiple
          options={top100Films}
          getOptionLabel={option => option.title}
          defaultValue={[top100Films[13]]}
          onChange={this.onTagsChange}
          renderInput={params => (
            <TextField
              {...params}
              variant="standard"
              label="Multiple values"
              placeholder="Favorites"
              margin="normal"
              fullWidth
            />
          )}
        />
      </div>
    );
  }
}

const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
  { title: 'The Dark Knight', year: 2008 },
  { title: '12 Angry Men', year: 1957 },
  { title: "Schindler's List", year: 1993 },
  { title: 'Pulp Fiction', year: 1994 },
  { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
  { title: 'The Good, the Bad and the Ugly', year: 1966 },
  { title: 'Fight Club', year: 1999 },
  { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },
  { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },
  { title: 'Forrest Gump', year: 1994 },
  { title: 'Inception', year: 2010 },
];

Вы уверены, что onChangeправильно использовали ?

onChange подпись :function(event: object, value: any) => void

@Dworo

Для тех, у кого есть проблемы с отображением выбранного элемента из выпадающего списка в поле ввода.

Я нашел обходной путь. По сути, вы должны связать inputValueкак onChageдля, так Autocompleteи для TextFieldдерьмового пользовательского интерфейса.

const [input, setInput] = useState('');

<Autocomplete
  options={suggestions}
  getOptionLabel={(option) => option}
  inputValue={input}
  onChange={(e,v) => setInput(v)}
  style={{ width: 300 }}
  renderInput={(params) => (
    <TextField {...params} label="Combo box" onChange={({ target }) => setInput(target.value)} variant="outlined" fullWidth />
  )}
/>

  <Autocomplete
                disableClearable='true'
                disableOpenOnFocus="true"
                options={top100Films}
                getOptionLabel={option => option.title}
                onChange={this.onTagsChange}
                renderInput={params => (
                  <TextField
                    {...params}
                    variant="standard"
                    label="Favorites"
                    margin="normal"
                    fullWidth
                  />
                )}
                />

После использования приведенного выше кода, я все еще не могу получить окно автозаполнения для отображения выбранной опции. Есть идеи, ребята?

Мне нужно было нажимать мой API на каждом входном изменении, чтобы получить свои теги от бэкэнда!

Используйте Material-ui onInputChange, если вы хотите получать предлагаемые теги при каждом изменении ввода!

this.state = {
  // labels are temp, will change every time on auto complete
  labels: [],
  // these are the ones which will be send with content
  selectedTags: [],
}
}

//to get the value on every input change
onInputChange(event,value){
console.log(value)
//response from api
.then((res) => {
      this.setState({
        labels: res
      })
    })

}

//to select input tags
onSelectTag(e, value) {
this.setState({
  selectedTags: value
})
}


            <Autocomplete
            multiple
            options={top100Films}
            getOptionLabel={option => option.title}
            onChange={this.onSelectTag} // click on the show tags
            onInputChange={this.onInputChange} //** on every input change hitting my api**
            filterSelectedOptions
            renderInput={(params) => (
              <TextField
                {...params}
                variant="standard"
                label="Multiple values"
                placeholder="Favorites"
                margin="normal"
                fullWidth
              />

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

         const {name, value } = event.target;
         setTukio({
          ...tukio,
          [name]: value,
        });

Это обновляет объект динамически на основе имени поля. Но при автозаполнении имя возвращается пустым. Поэтому я изменил обработчик с onChangeна onSelect. Затем либо создайте отдельную функцию для обработки изменения, либо, как в моем случае, добавьте оператор if, чтобы проверить, не передано ли имя.

// This one will set state for my onSelect handler of the autocomplete 
     if (!name) {
      setTukio({
        ...tukio,
        tags: value,
      });
     } else {
      setTukio({
        ...tukio,
        [name]: value,
      });
    }

Вышеупомянутый подход работает, если у вас есть одно автозаполнение. Если у вас есть несколько, вы можете передать пользовательскую функцию, как показано ниже

<Autocomplete
    options={tags}
    getOptionLabel={option => option.tagName}
    id="tags"
    name="tags"
    autoComplete
    includeInputInList
    onSelect={(event) => handleTag(event, 'tags')}
          renderInput={(params) => <TextField {...params} hint="koo, ndama nyonya" label="Tags" margin="normal" />}
        />

// The handler 
const handleTag = ({ target }, fieldName) => {
    const { value } = target;
    switch (fieldName) {
      case 'tags':
        console.log('Value ',  value)
        // Do your stuff here
        break;
      default:
    }
  };