React-Select >>单击添加按钮时如何在列表中显示多个选定的值

时间:2019-03-17 11:15:00

标签: reactjs drop-down-menu multi-select react-select

我已将下拉列表更改为多选,并且仅在单击“添加”按钮时才想在列表中显示值,但仅对一个选定值起作用。请帮助。我尝试了一些不同的操作,这是我当前的代码:

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>
    );
});

0 个答案:

没有答案