如何从自动完成材料 UI 中获取价值 - TypeScript

自动填充材料 UI 组件是一种常用于表单中的组件，它允许用户在输入框中输入字符，并自动完成剩余的文本。在本文中，我们将介绍如何从自动填充材料 UI 组件中获取价值，并使用 TypeScript 进行代码编写。

安装依赖包

首先，我们需要安装 Material UI 和 TypeScript。

npm install @material-ui/core @material-ui/lab
npm install typescript --save-dev

创建组件

接下来，我们将创建一个自动填充组件。在这个组件中，我们将使用 Autocomplete 组件。

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

const options = ["Option 1", "Option 2", "Option 3"];

const AutoCompleteComponent: React.FC = () => {
  return (
    <Autocomplete
      id="autocomplete-component"
      options={options}
      renderInput={(params) => (
        <TextField {...params} label="Auto Complete" margin="normal" />
      )}
    />
  );
};

export default AutoCompleteComponent;

从组件中获取价值

现在，我们需要从自动填充组件中获取用户选择的选项。要做到这一点，我们需要通过 onChange 属性绑定一个事件处理器函数。在这个函数中，我们可以访问选定的选项的价值，并将它存储在 state 变量中。

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

const options = ["Option 1", "Option 2", "Option 3"];

const AutoCompleteComponent: React.FC = () => {
  const [selectedValue, setSelectedValue] = useState<string | null>(null);

  const handleSelect = (event: React.ChangeEvent<{}>, value: string | null) => {
    setSelectedValue(value);
  };

  return (
    <Autocomplete
      id="autocomplete-component"
      options={options}
      onChange={handleSelect}
      renderInput={(params) => (
        <TextField {...params} label="Auto Complete" margin="normal" />
      )}
    />
  );
};

export default AutoCompleteComponent;

现在，我们可以在自动填充组件中选择一个选项，并将选项的价值存储在 selectedValue 变量中。在这个变量中，我们可以进一步处理选定的值或将其传递给其他组件或服务。

结论

在本文中，我们介绍了如何从自动填充材料 UI 组件中获取价值，并使用 TypeScript 进行编写。我们创建了一个自动填充组件，并通过 onChange 属性绑定了一个事件处理器函数，以获取用户选择的选项。我们还讨论了如何在脚手架中安装和配置 Material UI 和 TypeScript。是不是很简单呢？