使用 react-select 使用 bootstrap 4 创建标记 [英] Using the react-select to create the markup using bootstrap 4

查看：19
本文介绍了使用 react-select 使用 bootstrap 4 创建标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是 react-redux 的新手.在这里，我试图实现以下标记

所以从这里我使用以下代码实现的是，

<div className="col-md-12"><form className="form-inline"><div className="form-group col-md-4"><标签>选择技术</标签><选择值={selectedOption}onChange={this.handleChange}选项={选项}/>
<div className="form-group col-md-4"><标签>选择组件</标签><选择值={selectedOption}onChange={this.handleChange}选项={选项}/>

<div className="form-group col-md-4"><标签>选择工作</标签><button className="btn btn-primary">添加<button className="btn btn-primary">消除

</表单>

所以，这里我使用了 react-select.

我做错了什么?谁能帮我这个?谢谢

解决方案

你需要像下面几行一样更新你的选择的样式:

const 样式 = {容器:基础 =>({...根据，弹性:1})};功能应用(){返回 (<div className="row"><div className="col-12"><form className="form-inline"><div className="form-group col-4"><标签>选择技术</标签><选择样式={styles} options={options}/>

<div className="form-group col-4"><标签>选择组件</标签><选择样式={styles} options={options}/>

<div className="form-group col-4 row"><lable className="col-4">选择作业</lable><button className="btn btn-primary col-4">添加</button><button className="btn btn-primary col-4">移除</button>

</表单>

);}

这是一个现场示例.

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>

So, here I am using the 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>
  );
}

Here a live example.

这篇关于使用 react-select 使用 bootstrap 4 创建标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆