0
135
ViewsReact Select abrevia los nombres desplegables en selección múltiple
Hola, ¿es posible abreviar los nombres desplegables cuando se seleccionan como en la figura a continuación? 
este es mi codigo:
multiValue: [ { value: "BUF", label: "BUF" }, { value: "CCT", label: "CCT" }, { value: "JHB", label: "JHB" }, { value: "EKH", label: "EKH" }, { value: "ETK", label: "ETK" }, { value: "MAN", label: "MAN" }, { value: "NMB", label: "NMB" }, { value: "TSH", label: "TSH" } ], handleMultiChange(option) { this.setState({multiValue: option}); } <Select id='multiple' name="filters" placeholder="Filter City" value={this.state.multiValue} options={this.state.filterOptions} onChange={this.handleMultiChange} isMulti={this.state.isMulti} styles={style} />
·
Juan Pablo Isaza
1 answers
Answer question0
Puede lograr esto proporcionando un componente MultiValueLabel personalizado
MultiValueLabel.component.js
export default function MultiValueLabel({ data, innerProps, selectProps }) { // ...any logic you might need // 'data' should be the full object of each selected item // so reference whatever key is necessary return ( <div {...innerProps}> {data.abbr} </div> ) }Entonces simplemente pasas eso
<Select components={{ MultiSelectLabel }} ... other props />
·
Juan Pablo Isaza
Report
Answer question