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

Question

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

я пытался с onChange, но я не получил никаких результатов

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

Answer 1

Как уже упоминал Юки, убедитесь, что вы правильно использовали функцию 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 },
];

Answer 2

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

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