我已将下拉列表更改为多选,并且仅在单击“添加”按钮时才想在列表中显示值,但仅对一个选定值起作用。请帮助。我尝试了一些不同的操作,这是我当前的代码:
campaignSelect = (
<tr>
<th>
<div className="select-with-button">
<Select
name="campaign"
isMulti={true}
value={this.state.selectedCampaign}
onChange={this.handleChangeCampaign}
options={campaignOptions}
styles={selectStyles}
/>
<button type="submit" onClick={this.addCampaign}>
Add
</button>
</div>
</th>
</tr>
handleChangeCampaign(val) {
if (val) {
this.setState({ selectedCampaign: val });
} else {
this.setState({ selectedCampaign: null });
}
},
addCampaign() {
this.props.addCampaign(this.props.course_id,
this.state.selectedCampaign.value)
.then(() => this.props.fetchUsers(this.props.course_id));
this.setState({ selectedCampaign: null });
},
render() {
const campaignList = this.props.campaigns.map((campaign) => {
const removeButton = (
<button className="button border plus" onClick=
{this.removeCampaign.bind(this, campaign.title)}>-</button>
);
return (
<tr key={`${campaign.id}_campaign`}>
<td>{campaign.title}{removeButton}</td>
</tr>
);
});