以编程方式在 material-ui 自动完成 TextField 中设置值

Question

在我的 React 应用程序中，我有一个可以从下拉列表中获取值的输入。为此，我使用 material-ui Autocomplete 和 TextField 组件。

问题：如何通过单击按钮而不从下​​拉列表中选择以编程方式设置输入值？例如，我想从示例中设置“教父”，并且应该在输入中直观地看到该值。

Codesandbox 示例在这里

import React from "react";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { TextField, Button } from "@material-ui/core";

export default function ComboBox() {
  const handleClick = () => {
    // set value in TextField from dropdown list
  };

  return (
    <React.Fragment>
      <Autocomplete
        options={top100Films}
        getOptionLabel={option => option.title}
        style={{ width: 300 }}
        renderInput={params => (
          <TextField
            {...params}
            label="Combo box"
            variant="outlined"
            fullWidth
          />
        )}
      />
      <Button onClick={handleClick}>Set value</Button>
    </React.Fragment>
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 },
  { title: "The Dark Knight", year: 2008 }
];

Answer 1

您可以在状态中存储所需的值并将其传递给自动完成组件。

导入useState：

   import React, { useState } from 'react';

使用useState：

   const [val,setVal]=useState({})

单击按钮更改值

  const handleClick = () => {
    setVal(top100Films[0]);//you pass any value from the array of top100Films
   // set value in TextField from dropdown list
 };

并将这个值传递给渲染中的组件

 <Autocomplete
   value={val}
    options={top100Films}
    getOptionLabel={option => option.title}
    style={{ width: 300 }}
    renderInput={params => (
      <TextField
        {...params}
        label="Combo box"
        variant="outlined"
        fullWidth

      />
    )}
  />

Answer 2

如果要在输入中显示默认选定的值，还必须设置 Autocompelete 组件的 inputValue 属性和 onInputChange 事件

状态变化：

const [value, setValue] = useState("");
const [inputValue, setInputValue] = useState("");

手柄点击的变化

const handleClick = () => {
   setValue(top100Films[0]);
   setInputValue(top100Films[0]);
};

自动完成的变化

 <Autocomplete
    {...custom}
    value={value}
    inputValue={inputValue}
    onChange={(event, newValue) => {
      setValue(newValue);
    }}
    onInputChange={(event, newInputValue) => {
      setInputValue(newInputValue);
    }}

    options={top100Films}
    getOptionLabel={option => option.title}
    renderInput={(params) => (
      <TextField
        {...input}
        {...params}
        variant="outlined"
      />
    )}
  />