reactstrap：如何使下拉菜单的大小填满所有可用的 space

Question

我正在使用 reactstrap dropdown component 如下：

              <Dropdown 
                isOpen={this.state.dropdownOpen[3]}
                toggle={() => {
                  this.toggle(3);
                }}
                className="mb-10" 
              >

                <DropdownToggle caret> {this.state.dropDownValue}</DropdownToggle>
                <DropdownMenu>
                  <DropdownItem >  <div onClick={this.changeValue}>operateur_sav</div></DropdownItem>
                  <DropdownItem >  <div onClick={this.changeValue}>agent_support_tel</div></DropdownItem>
                  <DropdownItem >  <div onClick={this.changeValue}>agent_magasin</div></DropdownItem>
                </DropdownMenu>
              </Dropdown>

结果如下：

这是所有表单的代码：

 <Form noValidate onSubmit={this.onSubmit}>
          <FormGroup>
            <InputGroup>
              <InputGroupAddon addonType="prepend">
                <InputGroupText>Nom</InputGroupText>
              </InputGroupAddon>
              <Input
                type="text"
                id="nom"
                name="nom"
                value={this.state.nom}
                onChange={this.onChange}
              />
              <InputGroupAddon addonType="append">
                <InputGroupText>
                  <i className="fa fa-user"></i>
                </InputGroupText>
              </InputGroupAddon>
            </InputGroup>
          </FormGroup>
          <FormGroup>
            <InputGroup>
              <InputGroupAddon addonType="prepend">
                <InputGroupText>Email</InputGroupText>
              </InputGroupAddon>
              <Input
                type="email"
                id="email"
                name="email"
                value={this.state.email}
                onChange={this.onChange}
              />
              <InputGroupAddon addonType="append">
                <InputGroupText>
                  <i className="fa fa-envelope"></i>
                </InputGroupText>
              </InputGroupAddon>
            </InputGroup>
          </FormGroup>
          <FormGroup>
            <InputGroup>
              <InputGroupAddon addonType="prepend">
                <InputGroupText>Role</InputGroupText>
              </InputGroupAddon>
              <Dropdown
                isOpen={this.state.dropdownOpen[3]}
                toggle={() => {
                  this.toggle(3);
                }}
                className="mb-10"
              >
                <DropdownToggle caret>
                  {" "}
                  {this.state.dropDownValue}
                </DropdownToggle>
                <DropdownMenu>
                  <DropdownItem>
                    {" "}
                    <div onClick={this.changeValue}>operateur_sav</div>
                  </DropdownItem>
                  <DropdownItem>
                    {" "}
                    <div onClick={this.changeValue}>agent_support_tel</div>
                  </DropdownItem>
                  <DropdownItem>
                    {" "}
                    <div onClick={this.changeValue}>agent_magasin</div>
                  </DropdownItem>
                </DropdownMenu>
              </Dropdown>
              <InputGroupAddon addonType="append">
                <InputGroupText>
                  <i className="fa fa-id-badge "></i>
                </InputGroupText>
              </InputGroupAddon>
            </InputGroup>
          </FormGroup>
          <FormGroup>
            <InputGroup>
              <InputGroupAddon addonType="prepend">
                <InputGroupText>Mot de passe</InputGroupText>
              </InputGroupAddon>
              <Input
                type="password"
                id="mot_de_passe"
                name="mot_de_passe"
                value={this.state.mot_de_passe}
                onChange={this.onChange}
              />
              <InputGroupAddon addonType="append">
                <InputGroupText>
                  <i className="fa fa-asterisk"></i>
                </InputGroupText>
              </InputGroupAddon>
            </InputGroup>
          </FormGroup>
          <FormGroup className="form-actions">
            <Button type="submit" size="sm" color="primary">
              Créer
            </Button>
          </FormGroup>
        </Form>

我一直在寻找使 下拉菜单 'role' 与其他 输入元素 占用相同大小的方法] 这样所有表格行的宽度都将相同。
我的研究使我找到了 2 种解决方案，其中 none 有效：
解决方案 1：**
由于在 reactstrap 中：The DropdownToggle uses the Button component internally, meaning it also accepts all the props the Button component accepts.，我可以像在按钮元素中一样使用 **size 和 block：

  <Button color="primary" size="lg" block>Block level button</Button>

呈现如下：

所以我补充说：

size="lg" block

到 Dropdown 元素，但它所做的只是稍微放大下拉菜单的大小。
方案二：
我试图用合理的道具将内部包裹起来：

<ButtonGroup justified>
  <DropdownButton>...</DropdownButton>
</ButtonGroup>

这完全没有区别。
同时使用：

 width: 100%;

没有任何区别？
知道如何解决这个问题吗？

Answer 1

这是您的案例的工作代码 - https://codesandbox.io/s/gracious-payne-b1rv4

有几处是错误的 -

dropdownOpen - 这应该设置为布尔值但被分配给某个数组。
className - 这应该是名称而不是样式。

给 DropdownToggle 元素一个 className 并添加 width: 100% 到那个 className，然后你的下拉菜单应该能够占据整个宽度。

reactstrap：如何使下拉菜单的大小填满所有可用的 space

reactstrap : how to make dropDown menu's size fill all of the available space

html

javascript

css

reactjs

reactstrap