将标签添加到react-select [英] Adding the labels to the react-select
本文介绍了将标签添加到react-select的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是react-js
的新手.这里我想做的是,
I am new to the react-js
. here what I am trying to do is that,
现在我尝试的是
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>
所以,在这里,当我尝试添加标签时,它就不在一行中了,
So, Here when I tried to add the label then it is not coming in the one line,
有人可以帮我吗?
提前谢谢!
推荐答案
如果您的值"属性有效,则标签"将显示在第一行-确保您的selectedOption状态具有选项中存在的有效值值-全部根据文档.
the "label" will show in the first line if your "value" property is valid - make sure your selectedOption state has a valid value that exists in your options value - all according to the 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}
/>
);
}
}
这篇关于将标签添加到react-select的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文