获取 React Material-UI Autocomplete 中的值答案

【问题标题】：Getting the value in the React material-UI Autocomplete获取 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 没有显示与所选值相关的任何内容。

【问题讨论】：

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

标签： javascript reactjs material-ui

【解决方案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"
           />
        )}
   />

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

【讨论】：