Abrufen des Werts in der automatischen Vervollständigung der Reaktionsmaterial-Benutzeroberfläche

Ich beziehe mich auf die Dokumentation von React Material-UI (https://material-ui.com/components/autocomplete/).

Im Democode,

    <Autocomplete
      options={top100Films}
      getOptionLabel={(option: FilmOptionType) => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" fullWidth />
      )}
    />

Ich verstehe, wie es funktioniert, aber ich bin mir nicht sicher, wie ich den ausgewählten Wert erhalten soll.

Zum Beispiel möchte ich die verwenden onChange prop dazu, damit ich basierend auf der Auswahl einige Aktionen ausführen kann.

Ich habe versucht hinzuzufügen onChange={v => console.log(v)}

aber die v zeigt nichts im Zusammenhang mit dem ausgewählten Wert an.

Gelöst durch die Verwendung von Passing in the (event, value) zum onChange Requisiten.

<Autocomplete
    onChange={(event, value) => console.log(value)} // prints the selected value
    renderInput={params => (
        <TextField {...params} label="Label" variant="outlined" fullWidth />
    )}
/>

Das onChange prop funktioniert auch für mehrere Autocomplete-Werte (@Steve Angello @ShwetaJ). Das value Zurückgegeben wird eine Liste aller ausgewählten Optionen.

const [selectedOptions, setSelectedOptions] = useState([]);

const handleChange = (event, value) => setSelectedOptions(value);

const handleSubmit = () => console.log(selectedOptions);

.
.
.

<Autocomplete
  multiple
  autoHighlight
  id="tags-outlined"
  options={top100Films}
  getOptionLabel={(option) => option.title}
  onChange={handleChange}
  filterSelectedOptions
  renderInput={(params) => (
    <TextField
      {...params}
      variant="standard"
    />
  )}
/>

.
.
.


<button onClick={handleSubmit}>Submit!</button>

Sie können verwenden useState um den empfangenen Wert zu speichern und onChange um den wert zu bekommen:

const [selected, setSelected] = useState([]);


return (
    <Autocomplete
        onChange={(event, value) => setSelected(value)}
        renderInput={(params) => <TextField {...params} label="selected" />}
    />
);

Hier ist TS Arbeitsbeispiel

  const tags = ["perimeter", "Algebra", "equation", "square root"];

  const handleInput = (e: React.SyntheticEvent, value: string[]) => {
    console.log(value);
  };

<Autocomplete
    multiple
    options={tags}
    onChange={handleInput}
    renderTags={(value: readonly string[], getTagProps) =>
    value.map((option: string, index: number) => (
            <Chip
                variant="outlined"
                label={option}
                {...getTagProps({ index })}
             />
            ))
           }
           renderInput={(params) => (
            <TextField
               {...params}
               variant="filled"
               label="Tags"
               placeholder="select question tags"
           />
        )}
   />

============ Ausgang ===============