Restraps-如何在表单组内创建下拉列表

Question

我正在尝试使用react-strap在React表单中添加一个下拉列表。但是，存在许多颠覆性的装饰问题。

1. 选择框将上移而不是下移。
2. 下拉框没有显示默认值，因此非常狭窄。
3. 下拉框与表单的其余部分不对齐。

这里是有问题的代码：

   <div class="form-row">
    <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
        <DropdownToggle caret>
            {this.state.dropDownValue}
        </DropdownToggle>
        <DropdownMenu>
        <DropdownItem onClick={() => this.handleChangeDropdown("Prod A")} dropDownValue="Prod A">Prod A</DropdownItem>
            <DropdownItem onClick={() => this.handleChangeDropdown("Prod B")} dropDownValue="Prod B">Prod B</DropdownItem>
        </DropdownMenu> 

    </ButtonDropdown>

</div>

<div class="form-row">

<div class="form-group col-md-6">
<FormGroup>
    <Label for="fullName">Full Name</Label>
    <Input type="text" name="fullName" id="fullName" value={item.fullName || 
    ''}
           onChange={this.handleChange} autoComplete="fullName"/>
    <span style={{color: "red"}}>{this.state.errors["fullName"]}</span>

  </FormGroup>
  </div>

  <div class="form-group col-md-6">
  <FormGroup>
    <Label for="company">Company</Label>
    <Input type="text" name="company" id="company" value={item.company || 
    ''}
           onChange={this.handleChange} />
  </FormGroup>
  </div>

</div>
...etc

是否有任何方法可以使此下拉框与其余输入字段对齐，向下下拉并具有默认值？

Answer 1

您应该用DropdownToggle组件包装Dropdown组件。示例：

import { Dropdown, DropdownToggle, DropdownItem, DropdownMenu} from "reactstrap";

return (
  <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
    <DropdownToggle caret>{this.state.dropDownValue}</DropdownToggle>
    <DropdownMenu>
      <DropdownItem onClick={() => this.handleChangeDropdown("Prod A")} dropDownValue="Prod A">
        Prod A
      </DropdownItem>
      <DropdownItem onClick={() => this.handleChangeDropdown("Prod B")} dropDownValue="Prod B">
        Prod B
      </DropdownItem>
    </DropdownMenu>
  </Dropdown>
);

更多关于这里https://reactstrap.github.io/components/dropdowns/