在React material-UI自动完成中获取价值


17

我指的是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不会显示与所选值相关的任何内容。

Answers:


41

通过将传递(event, value)onChange道具来解决。

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

如何添加onsubmit?
Prottay

3
我花了几个小时试图正确地实现这一价值,这很好地解决了。
Luis Febro

正确答案。请使其接受。
DJO丛砰
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.