Javascript 将标签添加到“选择”对话框中

我不熟悉

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>

const选项=[
{值：'chocolate'，标签：'chocolate'}，
{值：'草莓'，标签：'草莓'}，
{值：“香草”，标签：“香草”}
];
handleChange=（selectedOption）=>{
this.setState（{selectedOption}）；
log（`Option selected:`，selectedOption）；
}
const{selectedOption}=this.state；
主要的，重要的
成功

所以，当我尝试添加标签时，它不会出现在一行中

有人能帮我吗

提前谢谢

如果您的“value”属性有效，则“label”将显示在第一行中-确保您选择的选项状态在选项值中存在有效值-所有这些都取决于

您的代码应该如下所示：

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

从“React”导入React；
从“反应选择”导入选择；
常量选项=[
{值：'chocolate'，标签：'chocolate'}，
{值：'草莓'，标签：'草莓'}，
{值：“香草”，标签：“香草”}
];
类应用程序扩展了React.Component{
状态={
selectedOption:null，
}
handleChange=（selectedOption）=>{
this.setState（{selectedOption}）；
log（`Option selected:`，selectedOption）；
}
render（）{
const{selectedOption}=this.state；
返回(
主要的，重要的
成功
);
}
}

那么你想制作上图中的代码？你到底想实现什么？是的，我确实尝试过这样做，我们需要查看“选项”和“选择选项”常量+“handleChange”方法，以知道你已经正确设置了一切。你能在stackblitz中给我你的代码吗，所以我会让你们的代码和图片一样，这不会给我标签，实际上我无法得到图片中所示的结构