Gestire il cambiamento sul componente Completamento automatico dall'interfaccia utente materiale

Voglio usare il Autocompletecomponente per i tag di input. Sto cercando di ottenere i tag e salvarli su uno stato in modo da poterli successivamente salvare sul database. Sto usando le funzioni anziché le classi in reagire. Ci ho provato onChange, ma non ho ottenuto alcun risultato.

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

Come già accennato da Yuki, assicurati di aver usato onChangecorrettamente la funzione. Riceve due parametri. Secondo la documentazione:

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

event: L'origine dell'evento del callback

value: null (Il valore / i valori all'interno del componente Completamento automatico).

Ecco un esempio:

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

Sei sicuro di aver usato onChangecorrettamente?

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

@Dworo

Per chiunque abbia problemi con la visualizzazione di un elemento selezionato dal menu a discesa nel campo Input.

Ho trovato una soluzione alternativa. Fondamentalmente devi associare un inputValuea onChageper entrambi Autocompletee TextField, merda UI materiale.

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

Dopo aver usato il codice sopra, non riesco ancora a ottenere la casella di completamento automatico per visualizzare l'opzione selezionata. Qualche idea ragazzi?

Avevo bisogno di colpire la mia API su ogni modifica di input per ottenere i miei tag dal backend!

Usa Material-ui onInputChange se desideri ottenere i tag suggeriti su ogni modifica di input!

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

Volevo aggiornare il mio stato quando seleziono un'opzione dal completamento automatico. Ho avuto un gestore onChange globale che gestisce tutti gli input

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

Ciò aggiorna l'oggetto in modo dinamico in base al nome del campo. Ma sul completamento automatico il nome ritorna vuoto. Quindi ho cambiato il gestore da onChangea onSelect. Quindi creare una funzione separata per gestire la modifica o, come nel mio caso, aggiungere un'istruzione if per verificare se il nome non viene passato.

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

L'approccio sopra funziona se hai un solo completamento automatico. Se ne hai più, puoi passare una funzione personalizzata come di seguito

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