React中如何根据Material UI <TextField>下拉选值切换div显示？

你需要通过React状态跟踪下拉框的选中值，再根据这个值动态控制两个Div的显示/隐藏，具体修改步骤如下：

1. 导入并初始化状态：用useState钩子管理选中的源值，默认设为初始选项（比如'Fax'），确保默认状态下第一个Div显示、第二个隐藏。
2. 更新选择事件处理函数：在handleChangeInput中同步更新状态，记录用户选中的值。
3. 动态控制Div显示：根据状态值设置两个Div的display样式，实现切换逻辑。

修改后的完整代码：

import { useState } from 'react';
import TextField from '@mui/material/TextField';
import MenuItem from '@mui/material/MenuItem';

function MyComponent() {
  const inputSourceOptions = [
    { key: "Fax", value: "Fax" },
    { key: "Care Radius", value: "Care Radius" },
    { key: "Custom Value", value: "Custom Value" },
  ];

  // 初始化状态，默认选中第一个选项
  const [selectedSource, setSelectedSource] = useState('Fax');
  
  const handleChangeInput = (id, event) => {
    const selectedValue = event.target.value;
    console.log(selectedValue);
    // 更新选中状态
    setSelectedSource(selectedValue);
  };
  
  return (
    <>
      <TextField
        className="ruleContainer"
        select
        name="rule_source"
        label="Source"
        variant="outlined"
        size="small"
        // 绑定状态到下拉框值
        value={selectedSource}
        onChange={(event) =>
          handleChangeInput(inputField.id, event)
        }
      >
        {inputSourceOptions.map((opt) => (
          <MenuItem key={opt.key} value={opt.key}>
            {opt.value}
          </MenuItem>
        ))}
      </TextField>
      {/* 非"Custom Value"时显示第一个div */}
      <div style={{ display: selectedSource !== 'Custom Value' ? 'block' : 'none' }}>this is div one</div>
      {/* 选中"Custom Value"时显示第二个div */}
      <div style={{ display: selectedSource === 'Custom Value' ? 'block' : 'none' }}>this is div two</div>
    </>
  );
}

export default MyComponent;

额外说明： #

如果你的inputField来自组件props或全局状态（如Redux），只需将useState初始值替换为inputField.rule_source，并根据实际场景调整状态更新逻辑即可。

内容的提问来源于stack exchange，提问作者Rohit Verma