使用react-select使用bootstrap 4创建标记 [英] Using the react-select to create the markup using bootstrap 4
本文介绍了使用react-select使用bootstrap 4创建标记的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是 react-redux
的新手。在这里,我试图实现以下标记
I am new to the react-redux
. Here I am trying to achieve the following markup
所以从这里我使用以下代码获得的是,
So from Here what I achieved using the following code is ,
<div className="row">
<div className="col-md-12">
<form className="form-inline">
<div className="form-group col-md-4">
<lable>Select Technolgoy </lable>
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
</div>
<div className="form-group col-md-4">
<lable>Select Component </lable>
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
</div>
<div className="form-group col-md-4">
<lable>Select Job </lable>
<button className="btn btn-primary">
Add
</button>
<button className="btn btn-primary">
Remove
</button>
</div>
</form>
</div>
</div>
所以,我在这里使用 react-select
。
这是什么我我做错了吗?谁能帮我这个?谢谢
What is it that I am doing wrong ? can anyone help me with this? Thanks
推荐答案
您需要更新您选择的样式,如下所示:
You need to update the style of your selects like the following lines:
const styles = {
container: base => ({
...base,
flex: 1
})
};
function App() {
return (
<div className="row">
<div className="col-12">
<form className="form-inline">
<div className="form-group col-4">
<lable>Select Technolgoy </lable>
<Select styles={styles} options={options} />
</div>
<div className="form-group col-4">
<lable>Select Component </lable>
<Select styles={styles} options={options} />
</div>
<div className="form-group col-4 row">
<lable className="col-4">Select Job </lable>
<button className="btn btn-primary col-4">Add</button>
<button className="btn btn-primary col-4">Remove</button>
</div>
</form>
</div>
</div>
);
}
这里有实例。
这篇关于使用react-select使用bootstrap 4创建标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文