Question

我指的是React Material-UI（S3 doesn't really have folders）的文档。

在演示代码中，

    <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没有显示与所选值相关的任何内容。

Answer 1

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

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

Answer 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>

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

2 个答案: