Behandeln Sie Änderungen an der Autocomplete-Komponente aus der Material-Benutzeroberfläche

Ich möchte eine AutocompleteKomponente für Eingabe-Tags verwenden. Ich versuche, die Tags abzurufen und in einem Status zu speichern, damit ich sie später in der Datenbank speichern kann. Ich benutze Funktionen anstelle von Klassen in reagieren. Ich habe es versucht onChange, aber ich habe kein Ergebnis erzielt.

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

Stellen Sie, wie Yuki bereits erwähnt hat, sicher, dass Sie die onChangeFunktion ordnungsgemäß verwendet haben. Es erhält zwei Parameter. Laut Dokumentation:

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

event: Die Ereignisquelle des Rückrufs

value: null (Der Wert / die Werte innerhalb der Autocomplete-Komponente).

Hier ist ein Beispiel:

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

Bist du sicher, dass du es onChangerichtig benutzt hast ?

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

@Dworo

Für alle, die Probleme mit der Anzeige eines ausgewählten Elements aus der Dropdown-Liste im Eingabefeld haben.

Ich habe eine Problemumgehung gefunden. Grundsätzlich muss man für beide und eine beschissene Material-Benutzeroberfläche ein inputValueat binden .onChageAutocompleteTextField

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

Wenn ich den obigen Code verwende, kann ich das Feld für die automatische Vervollständigung immer noch nicht dazu bringen, die ausgewählte Option anzuzeigen. Irgendwelche Ideen, Leute?

Ich musste bei jeder Eingabeänderung meine API drücken, um meine Tags vom Backend zu erhalten!

Verwenden Sie Material-ui onInputChange, wenn Sie Ihre vorgeschlagenen Tags bei jeder Eingabeänderung erhalten möchten!

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

Ich wollte meinen Status aktualisieren, wenn ich eine Option aus der automatischen Vervollständigung auswähle. Ich hatte einen globalen onChange-Handler, der alle Eingaben verwaltet

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

Dadurch wird das Objekt dynamisch basierend auf dem Namen des Felds aktualisiert. Bei der automatischen Vervollständigung wird der Name jedoch leer zurückgegeben. Also habe ich den Handler von onChangeauf geändert onSelect. Erstellen Sie dann entweder eine separate Funktion, um die Änderung zu behandeln, oder fügen Sie wie in meinem Fall eine if-Anweisung hinzu, um zu überprüfen, ob der Name nicht übergeben wird.

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

Der obige Ansatz funktioniert, wenn Sie eine einzelne Autovervollständigung haben. Wenn Sie mehrere u haben, können Sie eine benutzerdefinierte Funktion wie unten übergeben

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