如何在 React 中自定義 Reactstrap 按鈕？

Question

我正在開發一個 React 項目，在該項目中我使用的是 Reactstrap。 我有一個按鈕

落下。 對於該按鈕下拉標題是 Select 下拉，如果我點擊下拉然后我

將獲得選項，所以如果我 select 這些選項我的標題必須替換標題中的那些選項。

這是 App.js

import React, { useState } from 'react';
import './App.css';
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';


function App(props) {
  const [dropdownOpen, setOpen] = useState(false);

  const toggle = () => setOpen(!dropdownOpen);
  return (
    <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret>
        Select Dropdown
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem>First Action</DropdownItem>
        <DropdownItem>Third Action</DropdownItem>
      </DropdownMenu>
    </ButtonDropdown>
  );
}

export default App;

````````



If you feel I am not clear with my doubt, please put a comment.

Answer 1

下拉菜單不應該將所選值顯示為 header UX 明智的。 可能您正在尋找 Select 盒子。 無論如何，您可以使用反應 state 來實現您正在尋找的東西。

function App(props) {
  const [dropdownOpen, setOpen] = useState(false);
  const [header, setHeader] = useState('Select Dropdown');

  const toggle = () => setOpen(!dropdownOpen);
  return (
    <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret>
        {header}
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem onClick={() => setHeader('First Action')}>First Action</DropdownItem>
        <DropdownItem onClick={() => setHeader('Third Action')}>Third Action</DropdownItem>
      </DropdownMenu>
    </ButtonDropdown>
  );
}

export default App;

Answer 2

它現在是一個不受控制的組件。 使其可控。

添加另一個 state 以保存所選選項的值。 嘗試這個

import React, { useState } from 'react';
import './App.css';
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';


function App(props) {
  const [dropdownOpen, setOpen] = useState(false);
  const [action, setAction] = useState(null);

  const toggle = () => setOpen(!dropdownOpen);
  return (
    <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret>
        {action || 'Select Dropdown'}
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem onClick={() => setAction('First Action')>
           First Action
        </DropdownItem>
        <DropdownItem onClick={() => setAction('Third Action')>
          Third Action
        </DropdownItem>
      </DropdownMenu>
    </ButtonDropdown>
  );
}

export default App;

在這里，它將默認顯示“選擇 Dropwon”以及選擇該操作時選擇的操作。