web-dev-qa-db-ja.com

React選択-複数選択複数のオプションを表示するカスタム方法

複数選択と、選択したオプションを表示する表示を作成する方法をカスタマイズしたいと考えています。

現在、多くのオプションが選択されているため、selectコンポーネントは特定のUIのために法外なスペースを占有します。例を参照してください：

enter image description here

入力内の選択されたオプションに標準のチップディスプレイを利用したいのですが、選択されたオプションのいくつか（最大3/4など）のみを表示し、次に「バッジ」カウントを追加します。入力の値コンテナに表示されない選択されたオプション。選択されているが、入力に表示できるチップの最大数を超えているオプションは、ドロップダウンリスト内で選択されているように表示されますが、値を表示するチップはではないはずですドロップダウンに表示します。

カスタムValueContainerを使用して最初のいくつかのチップ選択のみを表示し、追加/「オーバーフロー」選択の数を追加して、この一部を実装しました。 hideSelectedOptionsを使用してリスト内の選択された項目を表示する方法のみを最大値がこの小道具はブール値をとるため、すべてを見せずに会った。

enter image description here

これが私がこれまでに持っているものです： https://codesandbox.io/s/custom-react-select-sjtib


import React, { Component } from "react";
import Select, { components } from "react-select";
import { colourOptions } from "./docs/data";
import "./example.css";

class CustomSelect extends Component {
  state = {
    values: []
  };

  handleChange = values => {
    this.setState({ values });
  };

  render() {
    const { values } = this.state;
    return (
      <div>
        <Select
          hideSelectedOptions={values.length < 3 ? true : false}
          isMulti
          options={colourOptions}
          onChange={this.handleChange}
          value={values}
          components={{ ValueContainer }}
        />
      </div>
    );
  }
}

export default CustomSelect;

const ValueContainer = ({ children, getValue, ...props }) => {
  let maxToShow = 3;
  var length = getValue().length;
  let displayChips = React.Children.toArray(children).slice(0, maxToShow);
  let shouldBadgeShow = length > maxToShow;
  let displayLength = length - maxToShow;

  return (
    <components.ValueContainer {...props}>
      {!props.selectProps.inputValue && displayChips}
      <div className="root">
        {shouldBadgeShow &&
          `+ ${displayLength} item${length != 1 ? "s" : ""} selected`}
      </div>
    </components.ValueContainer>
  );
};
reactjsselectdropdownreact-select
4
user10782250

私は個人的に_hideSelectedOptions={false}_を保持し、stylesプロパティの使用法（より正確にはoptionsプロパティ）を使用し、表示されないものには_display: 'none'_を設定します。

_const styles = {
    option: (base, value) => {
        return (shouldBeShown(value) ? { ...base } : { display: 'none'});
    }
};
_

shouldBeShown(value)は、特定のオプションを表示する必要があるかどうかを確認するためのカスタム関数です。オプションデータを取得するには、_value.data_を使用できます。

次に、Selectコンポーネントに_styles={styles}_を設定できます。

_<Select
    hideSelectedOptions={false}
    isMulti
    styles={styles}
    onChange={this.handleChange}
    options={options}
    value={values}
    components={{ ValueContainer }}
/>
_
1
cohnred

何らかの理由で、まったく動作しません。アドバイスを下さい。

私が持っているメソッド名はValue Limit Containerです。

コードサンドボックスリンク

0
a2441918