Как построить динамическое поле выбора в реагировать

Question

У меня есть проект, в котором пользователь может ввести некоторые данные, затем он передает данные в экземпляр mongDB.Затем у меня есть панель поиска, где пользователь может перетаскивать данные вниз, как только они нажимают на выбранный идентификатор, он помещает всю информацию соответствующего документа в некоторые текстовые поля, чтобы пользователь мог их увидеть.

Моя проблема связана с выбором части элемента. Это работает, если пользователь нажимает на идентификатор, который заполняет поля.Однако я имел их в тегах H1 для тестирования, и он отображал один H1 для каждого идентификатора.

Теперь я переместил его в поле выбора.

Мне просто нужно, чтобы каждый идентификатор отображался в одном окне выбора, а не отображать поле для каждого идентификатора

вот мойтекущий код:

import React from "react";
import PropTypes from "prop-types";

import { Form, FormGroup, Input, Container, Row, Col, Label } from "reactstrap";
import "./Search.css";
import axios from "axios";
import SearchBox from "react-search-box";

class Search extends React.Component {
  static propTypes = {
    handleCustomer: PropTypes.func.isRequired
  };

  constructor(props) {
    super(props);
    this.state = {
      searchInfo: [],
      query: "",
      companyFilter: ""
    };

    this.itWorks = this.itWorks.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
  }

  search = query => {
    let filter = {};
    if (this.state.companyFilter) {
      filter = {
        customerID: {
          $regex: ".*" + this.state.companyFilter + ".*",
          $options: "i"
        }
      };
    }

    let url = "http://localhost:5000/getData?filter=" + JSON.stringify(filter);
    axios.get(url).then(res => {
      const searchInfo = (res.data || []).map(obj => ({
        customerID: obj.customerID,
        company: obj.companyName,
        sinage: obj.sinageCodes,
        curtain: obj.curtainCodes,
        method: obj.Method,
        notes: obj.Notes
      }));

      this.setState({ searchInfo });
      console.log(searchInfo);
    });
  };

  itWorks() {
    this.setState({
      companyFilter: document.getElementById("exampleSearch").value
    });
  }

  handleSearch = e => {
    if (e.key === "Enter") {
      this.search();
    }
  };

  componentDidMount() {
    this.search("");
  }
  render() {
    const { query, searchInfo } = this.state;

    return (
      <div>
        <Container>
          <FormGroup>
            <Label for="exampleSearch" />
            <Input
              type="search"
              name="search"
              id="exampleSearch"
              placeholder="Search for a CumstomerID"
              onChange={this.itWorks}
              onKeyPress={this.handleSearch}
            />
          </FormGroup>
        </Container>
        {this.state.searchInfo.map(function(searchInfo, index) {
          return (
            <FormGroup>
              <Label for="exampleSelectMulti">Select customerID</Label>
              <Input
                onChange={this.state.value}
                onClick={() => this.props.handleCustomer(searchInfo)}
                type="select"
                name="selectMulti"
                id="exampleSelectMulti"
                multiple
              >
                <option key={index}>
                  {" "}
                  {searchInfo.customerID.match(
                    new RegExp(this.state.companyFilter, "i")
                  ) || this.state.companyFilter === ""
                    ? "customerID: " + searchInfo.customerID
                    : ""}
                </option>
              </Input>
            </FormGroup>
          );
        }, this)}
      </div>
    );
  }
}

export default Search;

Функция поиска работает нормально. Просто нужно получить все возвращенные данные из моего API для отображения в одном окне выбора.

Спасибо!

Answer 1

Возможно, вы захотите сопоставить варианты.Как то так.

             <FormGroup>
              <Label for="exampleSelectMulti">Select customerID</Label>
              <Input
                onChange={this.handleChange}
                type="select"
                name="selectMulti"
                id="exampleSelectMulti"
                value={this.state.value}
                multiple
              >
           {this.state.searchInfo.map(function(searchInfo, index) {
                <option key={index}>
                  {" "}
                  {searchInfo.customerID.match(
                    new RegExp(this.state.companyFilter, "i")
                  ) || this.state.companyFilter === ""
                    ? "customerID: " + searchInfo.customerID
                    : ""}
                </option>
              </Input>
            </FormGroup>