获取 React Material-UI Autocomplete 中的值

Posted 2023-02-22

【中文标题】获取 React Material-UI Autocomplete 中的值

【英文标题】：Getting the value in the React material-UI Autocomplete

【发布时间】：2020-02-28 03:52:52

【问题描述】：

我指的是 React Material-UI (https://material-ui.com/components/autocomplete/) 的文档。

在演示代码中，

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

我知道它是如何工作的，但我不确定我应该如何获得选定的值。

例如，我想为此使用 onChange 属性，以便我可以根据选择进行一些操作。

我尝试添加onChange=v => console.log(v)

但v 没有显示与所选值相关的任何内容。

【问题讨论】：

感谢您的提问。不敢相信该项目还没有明确记录这一点！

【参考方案1】：

通过将(event, value) 传递给onChange 属性来解决。

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

【讨论】：

如何添加onsubmit？

我花了好几个小时试图得到正确的值，这很好地解决了。

不错！有人可能会打有用的小附录：如果用户输入任意值（如freeSolo），则没有onChange 事件。但是，有onInputChange，我正在跟踪组件状态中的值，因此当用户单击“添加”按钮时我可以使用它。我正在使用这两个事件。

如何获取所选项目的索引？意思是如果我选择第一个，我想要 0 等等

我如何获得多个自动完成值？

【参考方案2】：

onChange 属性也适用于多个自动完成值 (@Steve Angello @ShwetaJ)。返回的value 是所有选定选项的列表。

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>

【参考方案3】：

这是 TS 工作示例

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

============输出===============