根据在下拉列表中选择的项目反应更改内容

Question

我在 Component 文件夹中有三个不同的 JSX，每个代表一个不同的 table。
这些 JSX 中的函数名称是：

表 1
表 2
表 3

本网站的目标是根据下拉列表中的选择切换到不同的table功能(<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;

Please check animation

如您所见，目前下拉菜单确实转到了正确的字符串，但不幸的是，在函数 Tab(value) 中，无论我选择什么，它总是 returns。

请指教我应该在函数 Tab(value) 中修改什么以使其工作。

Answer 1

只需将 Tab 移出您的 App 组件，在 props 中您必须使用 {} 解构 props 以获得价值：

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;

Answer 2

问题是：您在 function parameters 中得到一个 object，并且您正在比较 object 和 Table 2 和 Table 1.

所以只需将您的函数更改为：

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

建议：

使用===代替==（与答案无关）
无需使用 toString，因为您的所有 DropDown 值都有字符串值

根据在下拉列表中选择的项目反应更改内容

React change content based on item selected in Dropdown

javascript

reactjs

dropdown

react-bootstrap