将标签添加到反应选择答案

【问题标题】：Adding the labels to the react-select将标签添加到反应选择
【发布时间】：2019-06-10 08:43:26
【问题描述】：

我是react-js 的新手。这里我想做的是，

现在我尝试的是

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' }
];
handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
}
const { selectedOption } = this.state;

<div className="row" style={styles}>
    <div className="col-12 d-flex">
        <div className="col-md-4">
            <Select
            value={selectedOption}
            onChange={this.handleChange}
            options={options}
            />
        </div>
        <div className="col-md-4">
            <Select
            value={selectedOption}
            onChange={this.handleChange}
            options={options}
            />
        </div>
        <div className="col-md-4">
            <div className="add">
                <button type="button" class="btn btn-primary">Primary</button>
            </div>
            <div className="remove">
                <button type="button" class="btn btn-success">Success</button>
            </div>
        </div>
    </div>
</div>

所以，在这里，当我尝试添加标签时，它并没有出现在一行中，

谁能帮我解决这个问题？

提前致谢！！

【问题讨论】：

所以你想制作像上图这样的代码？
你到底想达到什么目的？
是的，我确实尝试过这样做
我们需要查看 "options" 和 "selectedOption" consts + "handleChange" 方法才能知道您已正确设置所有内容
你能把你在stackblitz中的代码给我吗，我会让你的代码和图片一样

标签： javascript reactjs redux bootstrap-4 react-redux

【解决方案1】：

如果您的“值”属性有效，“标签”将显示在第一行 - 确保您的 selectedOption 状态具有存在于您的选项值中的有效值 - 全部根据 docs。

您的代码应如下所示：

import React from 'react';
import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

class App extends React.Component {
  state = {
    selectedOption: null,
  }
  handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  }
  render() {
    const { selectedOption } = this.state;

    return (
 <div className="row" style={styles}>
        <div className="col-12 d-flex">
            <div className="col-md-4">
                <Select
                value={selectedOption}
                onChange={this.handleChange}
                options={options}
                />
            </div>
            <div className="col-md-4">
                <Select
                value={selectedOption}
                onChange={this.handleChange}
                options={options}
                />
            </div>
            <div className="col-md-4">
                <div className="add">
                    <button type="button" class="btn btn-primary">Primary</button>
                </div>
                <div className="remove">
                    <button type="button" class="btn btn-success">Success</button>
                </div>
            </div>
        </div>
    </div>
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={options}
      />
    );
  }
}

【讨论】：

这不会给我标签的东西
实际上我无法得到如图所示的结构