Javascript 如何在React中显示自动完成文本字段中的选定值？

新手在这里做出反应，我正在一个多表单应用程序中构建一个搜索页面，用户可以在自动完成文本字段中搜索名、姓或学生ID的学生

现在，自动完成文本字段的选项被成功传递，并在光标位于文本字段中时显示，但键入或实际选择值似乎不会影响文本字段的值

代码如下

<Autocomplete
        id="auto-complete"
        options={values.suggestions}
        getOptionLabel={option => option.stuId+" "+ option.fName+" "+option.lName}
        autoComplete
        includeInputInList
        fullWidth
        renderInput={params => (
           <TextField {...params}  margin="normal" fullWidth />)}
        />

option.stuId+“”+option.fName+“”+option.lName}
自动完成
includeInputList
全宽
renderInput={params=>(
)}
/>

值通过道具传递

---

预期结果是使用所选学生的stuId更新状态中的“searchKeyword”，并在自动完成文本字段中显示它。我可以使用onChange或default value函数吗？

这就是您想要的吗

this.setState（{value}）}
...
/>

您可以在钩子的选项状态中获取值

/* 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 [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);
      }}
      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 }
];

/*eslint在定义前禁用“无使用”*/
从“React”导入React，{useState}；
从“@material ui/core/TextField”导入TextField；
从“@material ui/lab/Autocomplete”导入自动完成；
导出默认函数组合框（）{
const[option，setOption]=useState（“”）；
返回(
我相信类似的东西。我试过`value={values.searchKeyword}onChange={handlechange（'searchKeyword'）}``你想分享代码吗？这是我的handlechange函数`handlechange=input=>e=>{this.setState（{[input]：e.target.value}）；}```