Как получить теги в последовательном порядке из двух поисковых входов

Question

У меня есть два поисковых входа A и B. Значение поиска A и B представляется в виде тегов под входными данными поиска. В настоящее время я нажимаю значение поиска каждого входа в массиве и отображать их в виде тегов, но это не в последовательном порядке. Например: входы A будут отображаться первыми, а затем входы B отображаются в тегах. Как заказать их в порядке их входов. Ссылка на код https://codesandbox.io/s/snowy-dream-gpy4x

import React from "react";
import "antd/dist/antd.css";
import { Input, Tag } from "antd";

const { Search } = Input;

class SearchInputs extends React.Component {
  state = {
    tagsA: [],
    tagsB: []
  };

  onCloseTagA = (e, i) => {
    e.preventDefault();
    this.setState({
      tagsA: this.state.tagsA.filter((_, index) => index !== i)
    });
  };
  onCloseTagB = (e, i) => {
    e.preventDefault();
    this.setState({
      tagsB: this.state.tagsB.filter((_, index) => index !== i)
    });
  };
  handleSearchA = value => {
    console.log("The value", value);
    const { tagsA } = this.state;
    tagsA.push(value);
    this.setState({ tagsA });
  };
  handleSearchB = value => {
    const { tagsB } = this.state;
    tagsB.push(value);
    this.setState({ tagsB });
  };
  render() {
    const { tagsA, tagsB } = this.state;
    return (
      <div
        style={{
          margin: "50px auto",
          display: "flex",
          flexDirection: "column"
        }}
        className="search-input-main"
      >
        <div style={{ display: "flex" }}>
          <div style={{ margin: "50px" }} className="search-input-a">
            Input A
            <Search
              placeholder="input search text"
              onSearch={this.handleSearchA}
              style={{ width: 200 }}
            />
          </div>
          <div style={{ margin: "50px" }} className="search-input-b">
            Input B
            <Search
              placeholder="input search text"
              onSearch={this.handleSearchB}
              style={{ width: 200 }}
            />
          </div>
        </div>
        <div>Tags of A and B</div>
        <div style={{ display: "flex" }}>
          {tagsA.map((tag, i) => (
            <Tag
              style={{ margin: "5px" }}
              key={i}
              closable
              onClose={e => this.onCloseTagA(e, i)}
              color="#f50"
            >
              {tag}
            </Tag>
          ))}
          {tagsB.map((tag, i) => (
            <Tag
              style={{ margin: "5px" }}
              key={i}
              closable
              onClose={e => this.onCloseTagB(e, i)}
              color="#f50"
            >
              {tag}
            </Tag>
          ))}
        </div>
      </div>
    );
  }
}

export default SearchInputs;

Answer 1

Не уверен, так как описание было написано неправильно, но я предполагаю, что вы хотите видеть теги ниже в порядке, а не то, как они помещаются в поисковую информацию A или B. Здесь я бы добавил еще одну переменную состояния и поставил все детали в него.

import React from "react";
import "antd/dist/antd.css";
import { Input, Tag } from "antd";

const { Search } = Input;

class SearchInputs extends React.Component {
  state = {
    tagsA: [],
    tagsB: [],
    allTags: []
  };

  onCloseTagA = (e, i) => {
    e.preventDefault();
    this.setState({
      tagsA: this.state.tagsA.filter((_, index) => index !== i),
      allTags: this.state.allTags.filter((_, index) => index !== i)
    });
  };
  onCloseTagB = (e, i) => {
    e.preventDefault();
    this.setState({
      tagsB: this.state.tagsB.filter((_, index) => index !== i),
      allTags: this.state.allTags.filter((_, index) => index !== i)
    });
  };
  handleSearchA = value => {
    console.log("The value", value);
    const { tagsA, allTags } = this.state;
    tagsA.push(value);
    allTags.push(value);
    this.setState({ tagsA, allTags });
  };
  handleSearchB = value => {
    const { tagsB, allTags } = this.state;
    tagsB.push(value);
    allTags.push(value);
    this.setState({ tagsB, allTags });
  };
  render() {
    const { allTags } = this.state;
    return (
      <div
        style={{
          margin: "50px auto",
          display: "flex",
          flexDirection: "column"
        }}
        className="search-input-main"
      >
        <div style={{ display: "flex" }}>
          <div style={{ margin: "50px" }} className="search-input-a">
            Input A
            <Search
              placeholder="input search text"
              onSearch={this.handleSearchA}
              style={{ width: 200 }}
            />
          </div>
          <div style={{ margin: "50px" }} className="search-input-b">
            Input B
            <Search
              placeholder="input search text"
              onSearch={this.handleSearchB}
              style={{ width: 200 }}
            />
          </div>
        </div>
        <div>Tags of A and B</div>
        <div style={{ display: "flex" }}>
          {allTags.map((tag, i) => (
            <Tag
              style={{ margin: "5px" }}
              key={i}
              closable
              onClose={e => this.onCloseTagB(e, i)}
              color="#f50"
            >
              {tag}
            </Tag>
          ))}
        </div>
      </div>
    );
  }
}

export default SearchInputs;

Answer 2

Я бы посоветовал изменить структуру данных для тегов. Вкратце я вижу два возможных решения:

1. Pu sh все теги в одном массиве вместо двух. Массив может выглядеть следующим образом:

[
    { tag: 'react', input: 'a' },
    { tag: 'jQuery', input: 'b' },
    ...
]

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

Pu sh теги с дополнительными данными, чтобы упорядочить их

tagsA = [
    { tag: 'react', dateTime: '2020-03-19T00:09:53.344Z' }
];
tagsB = [
    { tag: 'jQuery', dateTime: '2020-03-19T00:10:23.344Z' }
];

Тогда есть массив тегов для отображения, как это

get tags() {
    return [...this.state.tagsA, ...this.state.tagsB].sort((a, b) => {
        return new Date(a.dateTime) - new Date(b.dateTime);
    });
}