multi-select-react 不起作用 MultiSelectReact 组件

Question

import  MultiSelectReact  from 'multi-select-react';
multiSelect:[];
<MultiSelectReact 
options={this.state.multiSelect}
optionClicked={this.optionClicked}
selectedBadgeClicked={this.selectedBadgeClicked}
selectedOptionsStyles={selectedOptionsStyles}
optionsListStyles={optionsListStyles} 
/>
optionClicked(optionsList) {
this.setState({ multiSelect: optionsList });
}
selectedBadgeClicked(optionsList) {
this.setState({ multiSelect: optionsList });
}

我用上面的代码尝试了这个组件。但是，它显示空下拉列表。

Answer 1

您需要在数组中添加数据：

import React, { Component } from 'react';
import MultiSelectReact from 'multi-select-react';
class MultiSelect extends Component {
constructor() {
super();
this.state = {
multiSelect: [{ label: 'first', value: true }, { label: 'second' }],
};
}
render() {
const selectedOptionsStyles = {
color: '#3c763d',
backgroundColor: '#dff0d8',
};
const optionsListStyles = {
backgroundColor: '#fcf8e3',
color: '#8a6d3b',
};
return (
<div style={{ width: '200px' }}>
<MultiSelectReact
options={this.state.multiSelect}
optionClicked={this.optionClicked.bind(this)}
selectedBadgeClicked={this.selectedBadgeClicked.bind(this)}
selectedOptionsStyles={selectedOptionsStyles}
optionsListStyles={optionsListStyles}
/>
</div>
);
}
optionClicked(optionsList) {
console.log(
'here the lib adds value false to the selected item',
optionsList
);
this.setState({ multiSelect: optionsList });
}
selectedBadgeClicked(optionsList) {
console.log(
'here the lib adds value true to the selected item',
optionsList
);
this.setState({ multiSelect: optionsList });
}
}
export default MultiSelect;

// then use it by importing and calling <MultiSelect />

编辑：您还需要为数组中的每个选项添加 id：

[
{ label: 'first', value: true, id: 1 },
{ label: 'second', id: 2 },
],

- 我认为你应该改用反应选择组件。