IT技术 - 将标签添加到 react-select - 吾爱随笔录

我是新来的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>

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

谁能帮我这个？

提前致谢！！

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