为什么 onChange 事件在将值作为道具时在下拉列表中无法正常工作？

Question

我正在做一个 React typescript 项目，需要创建一个下拉菜单，其中包含必要的名称和链接以作为道具导航，这将在我的下拉菜单中显示为菜单项。但是当我在同一个 dropdown.tsx 文件中定义值时，onChange 事件正常工作。但是当我收到值作为道具时，onChange 事件将不起作用。

这是我的 DropdownComponent.tsx 文件

import * as React from 'react';

import OutlinedInput from '@mui/material/OutlinedInput';
import MenuItem from '@mui/material/MenuItem';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
import { Box, Button, InputBase } from '@mui/material';

// React-Router Imports
import { Link as RouterLink } from 'react-router-dom/';


/* eslint-disable-next-line */
export interface DropdownComponentProps {
  dashboardnames: Array<{
    name: string,
    link: string
  }>,
  renderDashboard:()=>void
}


export function DropdownComponent(props: DropdownComponentProps) {

  const [configName, setConfigName] = React.useState<string>();


  const handleChange = (event: SelectChangeEvent<typeof configName>) => {
    const {
      target: { value },
    } = event;
    setConfigName(value);
  };



  return (
   <Box   sx={{ marginTop:-5}}>
    <Select
          sx={{width:190,height:36}}
          displayEmpty
          value={configName}
          onChange={handleChange}
          input={<OutlinedInput />}
          renderValue={(selected) => {
            if (!selected) {
              return <>Mushroom tunnel 1</>;
            }

            return selected;
          }}
         
          inputProps={{ 'aria-label': 'Without label' }}
        >
          <MenuItem disabled value="">
            Frequently visited
          </MenuItem>
          <div style={{marginLeft:'20px', display:'flex'}}> <InputBase placeholder='search'/>
          <div style={{marginLeft:'10px', marginRight:'10px'}}>
            <Button><SearchOutlinedIcon /></Button>
            </div>
          
          </div>
          
        
          {props.dashboardnames.map((page) => (
              <MenuItem
                component={RouterLink}
                to={page.link}
                key={page.name}
                onClick={props.renderDashboard}
              >
              {page.name}
            </MenuItem>
          ))}
        </Select>
        </Box>
  );
}

export default DropdownComponent;

我在这里犯了什么错误？有人可以帮我解决这个问题吗？提前谢谢你！

Answer 1

您可以尝试将所选值作为道具传递给

DropdownComponent

并修改

handleChange

函数以通过回调更新所选值。

import * as React from 'react';

import OutlinedInput from '@mui/material/OutlinedInput';
import MenuItem from '@mui/material/MenuItem';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
import { Box, Button, InputBase } from '@mui/material';

// React-Router Imports
import { Link as RouterLink } from 'react-router-dom/';


/* eslint-disable-next-line */
export interface DropdownComponentProps {
  dashboardnames: Array<{
    name: string,
    link: string
  }>,
  selectedConfig: string | undefined,
  onConfigSelect: (configName: string) => void,
  renderDashboard:()=>void
}


export function DropdownComponent(props: DropdownComponentProps) {

  const { selectedConfig, onConfigSelect } = props;

  const handleChange = (event: SelectChangeEvent<typeof selectedConfig>) => {
    const {
      target: { value },
    } = event;
    onConfigSelect(value);
  };

  return (
    <Box sx={{ marginTop: -5 }}>
      <Select
        sx={{ width: 190, height: 36 }}
        displayEmpty
        value={selectedConfig}
        onChange={handleChange}
        input={<OutlinedInput />}
        renderValue={(selected) => {
          if (!selected) {
            return <>Mushroom tunnel 1</>;
          }

          return selected;
        }}

        inputProps={{ 'aria-label': 'Without label' }}
      >
        <MenuItem disabled value="">
          Frequently visited
        </MenuItem>
        <div style={{ marginLeft: '20px', display: 'flex' }}>
          <InputBase placeholder='search' />
          <div style={{ marginLeft: '10px', marginRight: '10px' }}>
            <Button><SearchOutlinedIcon /></Button>
          </div>

        </div>


        {props.dashboardnames.map((page) => (
          <MenuItem
            component={RouterLink}
            to={page.link}
            key={page.name}
            onClick={props.renderDashboard}
          >
            {page.name}
          </MenuItem>
        ))}
      </Select>
    </

希望对你有帮助！