根據下拉選單中選擇的專案反應更改內容

我在 Component 檔案夾中有三個不同的 JSX，每個都代表一個不同的表。
這些 JSX 中的函式名稱是：

• 表格1
• 表2
• 表3

該網站的目標是<Table1 />,<Table2 />, <Table3 />根據下拉選單中的選擇切換到不同的表格功能（ ）。

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Table1 from './component/table.jsx';
import Table2 from './component/table2.jsx';
import Table3 from './component/table3.jsx';
import Dropdown from 'react-bootstrap/Dropdown';

function App() {
  
  const [value,setValue]=useState('');
  const handleSelect=(e)=>{
    console.log(e);
    setValue(e)
  }
  function Tab(value) {
  
    if (value.toString() == 'Table2') {
      return <Table2 />;
    }else if (value.toString()=='Table1') {
      return <Table1 />;
    }else {
      return <Table3 />;
    }
  }

  return (
    <div className="app-container">
      <Dropdown  onSelect={handleSelect}>
        <Dropdown.Toggle variant="success" id="dropdown-basic">
          Dropdown Button
        </Dropdown.Toggle>

        <Dropdown.Menu>
          <Dropdown.Item eventKey="Table1">1</Dropdown.Item>
          <Dropdown.Item eventKey="Table2">2</Dropdown.Item>
          <Dropdown.Item eventKey="Table3">3</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
      <h4>You selected {value}</h4>
      <Tab value={value} />
    </div>
  );
}


export default App;

請檢查影片

如您所見，當前下拉選單確實轉到了正確的字串，但不幸的是，在函式 Tab(value) 中，無論我選擇什么，它都會回傳。

請告知我應該在函式 Tab(value) 中修改什么以使其作業。

uj5u.com熱心網友回復：

問題是：你得到了一個object你的內部function parameters，你正在將它object與Table 2and進行比較Table 1。

所以只需將您的功能更改為：

function Tab(e) {
    if (e.value === 'Table2') {
      return <Table2 />;
    } else if (e.value === 'Table1') {
      return <Table1 />;
    } else {
      return <Table3 />;
    }
 }

建議：

1. 使用 === 而不是 == （與答案無關）
2. 無需使用 toString，因為您的所有 DropDown 值都有字串值

uj5u.com熱心網友回復：

只需移出Tab您的App組件和道具，您必須使用它{}來消除道具以獲得價值：

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import Table1 from './component/table.jsx';
import Table2 from './component/table2.jsx';
import Table3 from './component/table3.jsx';
import Dropdown from 'react-bootstrap/Dropdown';

function App() {
  
  const [value,setValue]=useState('');
  const handleSelect=(e)=>{
    console.log(e);
    setValue(e)
  }
  

  return (
    <div className="app-container">
      <Dropdown  onSelect={handleSelect}>
        <Dropdown.Toggle variant="success" id="dropdown-basic">
          Dropdown Button
        </Dropdown.Toggle>

        <Dropdown.Menu>
          <Dropdown.Item eventKey="Table1">1</Dropdown.Item>
          <Dropdown.Item eventKey="Table2">2</Dropdown.Item>
          <Dropdown.Item eventKey="Table3">3</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
      <h4>You selected {value}</h4>
      <Tab value={value} />
    </div>
  );
}

function Tab({value}) {
  
    if (value.toString() == 'Table2') {
      return <Table2 />;
    }else if (value.toString()=='Table1') {
      return <Table1 />;
    }else {
      return <Table3 />;
    }
  }

export default App;

標籤：

上一篇：如果關鍵字匹配，我如何顯示div

下一篇：如何根據內部物件列條件過濾陣列物件