Manejar el cambio en el componente Autocompletar desde el material ui

Quiero usar Autocompletecomponentes para etiquetas de entrada. Estoy tratando de obtener las etiquetas y guardarlas en un estado para luego poder guardarlas en la base de datos. Estoy usando funciones en lugar de clases en react. Lo intenté onChange, pero no obtuve ningún resultado.

<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 />)} />

Como Yuki ya mencionó, asegúrese de usar la onChangefunción correctamente. Recibe dos parámetros. De acuerdo con la documentación:

Firma : function(event: object, value: any) => void.

event: El origen del evento de la devolución de llamada

value: nulo (El valor / valores dentro del componente Autocompletar).

Aquí hay un ejemplo:

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 },
];

¿Estás seguro de que lo usaste onChangecorrectamente?

onChange firma :function(event: object, value: any) => void

@Dworo

Para cualquiera que tenga un problema al mostrar un elemento seleccionado del menú desplegable en el campo Entrada.

Encontré una solución alternativa. Básicamente, tienes que vincular un inputValueat onChagepara ambos Autocompletey TextField, material de interfaz de usuario de mierda.

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
                  />
                )}
                />

Al usar el código anterior, todavía no puedo obtener el cuadro de autocompletar para mostrar la opción seleccionada. ¿Alguna idea, chicos?

¡Necesitaba presionar mi API en cada cambio de entrada para obtener mis etiquetas del backend!

Use Material-ui onInputChange si desea obtener sus etiquetas sugeridas en cada cambio de entrada.

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
              />

Quería actualizar mi estado cuando selecciono una opción del autocompletado. Tenía un controlador onChange global que gestiona todas las entradas

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

Eso actualiza el objeto dinámicamente en función del nombre del campo. Pero en Autocompletar el nombre vuelve en blanco. Así que cambié el controlador de onChangea onSelect. Luego, cree una función separada para manejar el cambio o, como en mi caso, agregué una declaración if para verificar si el nombre no se pasa.

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

El enfoque anterior funciona si tiene un solo autocompletado. Si tiene múltiples u puede pasar una función personalizada como a continuación

<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:
    }
  };