Reactstrap - 如何在表單組中創建下拉菜單

Question

我正在嘗試使用 react-strap 在 React 表單中包含一個下拉列表。 然而，有許多令人震驚的美容問題。

1. 選擇框向上而不是向下。
2. 下拉框不顯示默認值，因此非常窄。
3. 下拉框與表單的 rest 不一致。

這是有問題的代碼：

   <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

有沒有辦法讓這個下拉框與輸入字段的rest對齊，下拉，有默認值？

Answer 1

您應該使用DropdownToggle組件包裝Dropdown組件。 例子：

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

// other code 

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/