问题

I am making an application where I have multi select dropdown..

In which there is a requirement that I need to place the selected items below the select container.

Working Snippet:

#container {
  position: relative;
    text-align: left;
    width:100%;
}

#container > div {
    padding-top: 2em;
}

._2iA8p44d0WZ {
  border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 5px;
    min-height: 22px;
    position: relative;
}

._7ahQImy {
  padding: 4px 10px;
    background: #0096fb;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
}

#search_input {
  position: absolute;
  top: 0;
  left: 0;
}

<div id="container">
  <div class="_2iA8p44d0WZ">
  <span class="chip _7ahQImy">This is the main label</span>
  <span class="chip _7ahQImy false false">secondary label</span>
  <span class="chip _7ahQImy">Another label</span>
  <span class="chip _7ahQImy false false">even more labels labels labels labels labels labels</span>
  <input type="text" class="searchBox" id="search_input" placeholder="Select" autocomplete="off" value="">
</div>
</div>

The above one provides the result of making the selected items and select box inside a container.

Expected Output

|------ (#container) Start -----|
|   ---------------------       |
|   | Search Input      |       |     
|   ---------------------       |
|                               |
|------ (#container) End -------|

| This is the main label |

| secondary label    |

| Another label      |

| even more labels labels labels labels labels labels |

Note:

-> I cannot modify any of the HTML elements given.

-> There are some dynamic classes inside it for which I cannot modify the css classes for those dynamic classes.

-> List of dynamic classes for which css properties cannot be modified, _2iA8p44d0WZ and _7ahQImy .

-> List of ids/classes, I can modify the css properties are #container and .chip (span).

The exact library that I am trying to modify in my real app is here along with css code,

Please help me to place the selected items below the container box as like the above given expected result.

回答1:

You can hide the internal chips of the multi-select using the style prop.

CSS Customization

style={{
  chips: {
    display: 'none',
  }
}}

Now you need to render your selectedValues outside the Multiselect component. In order to do this you need to update your state.selectedValues state array, and map state.selectedValues to your own custom chip components.

Add an onSelect callback.

onSelect={(selectedValues) => this.setState({ selectedValues })}

Map state.selectedValues to "chips". I used a span, but you can use any wrapping element and style it accordingly.
```
<div>
  {selectedValues.map((chip) => (
    <span>{chip.key}</span>
  ))}
</div>
```

Fullcode

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      plainArray: ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"],
      objectArray: [
        { key: "Option 1", cat: "Group 1" },
        { key: "Option 2", cat: "Group 1" },
        { key: "Option 3", cat: "Group 1" },
        { key: "Option 4", cat: "Group 2" },
        { key: "Option 5", cat: "Group 2" },
        { key: "Option 6", cat: "Group 2" },
        { key: "Option 7", cat: "Group 2" }
      ],
      selectedValues: [
        { key: "Option 1", cat: "Group 1" },
        { key: "Option 2", cat: "Group 1" }
      ]
    };
    this.style = {
      chips: {
        background: "red"
      },
      searchBox: {
        border: "none",
        "border-bottom": "1px solid blue",
        "border-radius": "0px"
      },
      multiselectContainer: {
        color: "red"
      }
    };
  }

  render() {
    const { objectArray, selectedValues } = this.state;
    return (
      <div className="App">
        <h4 id="checkbox" className="mt40 mx20">
          <b>
            {" "}
            How can I customize the css for below below multi select to display
            only select box inside container and selected items after container
            box?{" "}
          </b>
        </h4>
        <Multiselect
          options={objectArray}
          displayValue="key"
          onSelect={(selectedValues) => this.setState({ selectedValues })}
          showCheckbox={true}
          selectedValues={selectedValues}
          style={{
            chips: {
              display: "none"
            }
          }}
        />
        <div>Some Content</div>
        <div>Some More Content</div>
        <div>
          Selected Values:
          {selectedValues.map((chip) => (
            <span>{chip.key}</span>
          ))}
        </div>
      </div>
    );
  }
}

Edit

To enable removing selected items then also implement the onRemove callback. To duplicate the chip style copy the applied chip CSS rules to your own style object.

const styles = {
  chip: {
    padding: "4px 10px",
    background: "#0096fb",
    marginRight: "5px",
    marginBottom: "5px",
    borderRadius: "10px",
    display: "inline-flex",
    alignItems: "center",
    fontSize: "13px",
    color: "#fff",
    whiteSpace: "nowrap"
  }
};

Also start with empty selected state

this.state = {
  plainArray: ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5"],
  objectArray: [
    { key: "Option 1", cat: "Group 1" },
    { key: "Option 2", cat: "Group 1" },
    { key: "Option 3", cat: "Group 1" },
    { key: "Option 4", cat: "Group 2" },
    { key: "Option 5", cat: "Group 2" },
    { key: "Option 6", cat: "Group 2" },
    { key: "Option 7", cat: "Group 2" }
  ],
  selectedValues: []
};

...

<Multiselect
  options={objectArray}
  displayValue="key"
  onSelect={(selectedValues) => this.setState({ selectedValues })}
  onRemove={(selectedValues) => this.setState({ selectedValues })} // <-- implement
  showCheckbox={true}
  selectedValues={selectedValues}
  style={{
    chips: {
      display: "none"
    }
  }}
/>

...

<div>
  Selected Values:
  {selectedValues.map((chip) => (
    <span key={chip.key} style={styles.chip}> // <-- set chip style prop
      {chip.key}
    </span>
  ))}
</div>

来源：https://stackoverflow.com/questions/65346004/how-to-display-selected-list-below-select-box-container

标签

javascript