时间戳

首页 > 解决方案 > 如何在 React 中显示自动完成文本字段中的选定值？

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

值通过道具传递。

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

标签： javascriptreactjssearchautocompletematerial-ui

解决方案

这是你要找的吗？

<Autocomplete
  ...
  value={this.state.value}
  onChange={(event, value) => this.setState({ value })}
  ...
/>

推荐阅读