如何通过材料ui在自动完成时获取输入框值而不是选定的li标签？

Question

How to get the value of inputbox on the autocomplete? Because if I used the e.target or e.currentTarget using onchange it will display the li tag not the inputbox.

Inputbox

Console output

Code
const handleChangeAutoComplete = (e, val) => {
    console.log(e.target);
  };


<Autocomplete
                  className={taskClasses.SelectAssignee}
                  options={users}
                  value={users.fullname}
                  onChange={handleChangeAutoComplete}
                  getOptionLabel={(user) => user.fullname}
                  renderInput={(params) => (
                    <TextField
                      placeholder='Assignee'
                      value={params.fullname}
                      {...params}
                      variant='outlined'
                    />
                  )}
                />

Answer 1

You will get user input in userInput state,You should get val second argument that you have passed to get object of selected value and instead of using onChange which listens for user select change, you need to use onInputChange, it will send what user types

const handleChangeAutoComplete = (e, val) => {
    console.log(val,"your value will be stored here inside second argument");
  };

Complete Code on how to handle autocomplete

/* eslint-disable no-use-before-define */
/* eslint-disable no-use-before-define */
import React, { useState } from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function ComboBox() {
  const [userInput, setUserInput] = useState("");
  const [option, setOption] = useState("");
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top10Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      value={option}
      onChange={(e, v) => {
        setOption(v);
      }}
      onInputChange={(e, v) => {
        setUserInput(v);
      }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top10Films = [
  { 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 }
];

You can refer to this sandbox

Answer 2

onInputChange= {(event, value)=>{
  console.log(event)
  console.log(value)
}}