反应自动完成以保持价值

Question

我想在反应表单中使用自动完成，它应该能够选择多个值。提交表单后，当我单击编辑按钮时，我提交的值应显示在自动完成组件中。这应该适用于基于名称的不同用户。

我该怎么做？

Answer 1

React 多选组件在几乎所有现代 React UI 组件库中都可用。您可以选择多个值并在需要处理它们时获取所选值。

1. 你可以在 npmjs 库的帮助下做到这一点

https://www.npmjs.com/package/react-multi-select-component

https://www.npmjs.com/package/multiselect-react-dropdown

1. 您可以使用任何 UI 组件库

https://mdbootstrap.com/docs/react/forms/multiselect/

https://material-ui.com/components/selects/#multiple-select

import React, { Component } from "react";
import { MDBSelect } from "mdbreact";

class SelectPage extends Component {
  state = {
    options: [
      {
        text: "Option 1",
        value: "1"
      },
      {
        text: "Option 2",
        value: "2"
      },
      {
        text: "Option 3",
        value: "3"
      },
      {
        text: "Option 4",
        value: "4"
      },
      {
        text: "Option 5",
        value: "5"
      }
    ]
  };

  render() {
    return (
      <div>
        <MDBSelect
          multiple
          options={this.state.options}
          selected="Choose your option"
          selectAll
        />
      </div>
    );
  }
}

export default SelectPage;

如果这有帮助，请告诉我！