如何实现点击按钮展示MaterialTextField中的内容？

核心思路 #

通过状态变量控制组件的显示与隐藏，点击按钮时切换状态，从而渲染目标组件。

具体实现步骤 #

1. 初始化状态变量
   在组件中使用useState钩子定义布尔状态，用来控制组件是否显示，初始值设为false（默认不展示）。

2. 编写按钮点击逻辑
   给按钮绑定点击事件，触发时切换状态变量的值（true与false互转）。

3. 条件渲染目标组件
   当状态为true时，渲染包含MaterialTextField的Grid组件；状态为false时不渲染。

完整代码示例 #

import { useState } from 'react';
import { Grid } from '@mui/material';
import MaterialTextField from './MaterialTextField'; // 替换为你的组件实际路径

function YourComponent() {
  // 控制输入框显示/隐藏的状态
  const [showTextField, setShowTextField] = useState(false);

  // 按钮点击事件：切换显示状态
  const toggleTextField = () => {
    setShowTextField(!showTextField);
  };

  return (
    <div>
      {/* 触发按钮 */}
      <button onClick={toggleTextField}>
        {showTextField ? '隐藏输入框' : '展示输入框'}
      </button>

      {/* 条件渲染目标组件 */}
      {showTextField && (
        <Grid item xs={4}>
          <MaterialTextField
            autoComplete="off"
            variant="outlined"
            label="名称"
            type="text"
            name="eventName"
            value={projectFilter.eventName}
            sx={{ width: '100%' }}
          />
        </Grid>
      )}
    </div>
  );
}

export default YourComponent;

多输入框扩展说明 #

如果需要展示多个绑定projectFilter属性的MaterialTextField（比如eventYear、eventType等），只需在条件渲染区块内添加对应组件即可，逻辑完全一致：

{showTextField && (
  <div>
    <Grid item xs={4}>
      <MaterialTextField
        autoComplete="off"
        variant="outlined"
        label="名称"
        type="text"
        name="eventName"
        value={projectFilter.eventName}
        sx={{ width: '100%' }}
      />
    </Grid>
    <Grid item xs={4}>
      <MaterialTextField
        autoComplete="off"
        variant="outlined"
        label="年份"
        type="number"
        name="eventYear"
        value={projectFilter.eventYear}
        sx={{ width: '100%' }}
      />
    </Grid>
  </div>
)}

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