React JS 如何实现点击Add Movement按钮动态生成带输入框的跳转按钮

核心是用React状态驱动组件渲染，替代现在静态硬编码MovementButton的写法，实现初始页面仅展示Add按钮、点击动态新增运动按钮的效果。

1. 父组件统一管理运动列表状态 #

在页面根组件（比如当前的App.js/首页组件）中定义一个运动列表状态，初始为空数组，保证页面加载时不会渲染任何运动按钮。

为什么初始值设为空数组？React渲染列表时，数组长度为0的话，遍历（map）的逻辑不会执行，自然不会在页面上渲染多余的组件，完全匹配初始页面只显示Add按钮的要求。

import React, { useState } from 'react';
import AddMovementButton from './AddMovementButton';
import MovementButton from './MovementButton';

export default function HomePage() {
  // 初始为空数组，存储所有已创建的运动按钮
  const [movementList, setMovementList] = useState([]);

  // 点击Add按钮时，新增一条空的运动记录
  const handleAddMovement = () => {
    // 用Date.now()生成临时唯一id，新手测试无需额外引入工具库
    const newMovement = {
      id: Date.now(),
      movementName: '' // 存储用户输入的运动名称
    };
    // 追加到运动列表中
    setMovementList(prevList => [...prevList, newMovement]);
  };

  // 更新对应id的运动名称
  const handleNameChange = (movementId, newName) => {
    setMovementList(prevList => 
      prevList.map(item => 
        item.id === movementId ? {...item, movementName: newName} : item
      )
    );
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <AddMovementButton onAddClick={handleAddMovement} />
      {/* 遍历数组动态渲染运动按钮，列表有几条就渲染几个 */}
      {movementList.map(movement => (
        <MovementButton 
          key={movement.id}
          movementId={movement.id}
          movementName={movement.movementName}
          onNameChange={handleNameChange}
        />
      ))}
    </div>
  );
}

2. 给Add Movement按钮绑定点击事件 #

修改AddMovementButton组件，接收父组件传递的点击回调，把点击事件绑定到按钮上：

import React from 'react';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
import AddCircleIcon from '@material-ui/icons/AddCircle';

const useStyles = makeStyles((theme) => ({
  button: {
    margin: theme.spacing(1),
    background: '#C4C4C4',
    fontFamily: 'PT Sans Caption',
    fontSize: '18px',
    borderRadius: '10px',
    padding: '20px',
    marginTop: '50px',
    width: '700px'
  },
}));

// 接收父组件传入的点击回调
export default function AddMovementButton({ onAddClick }) {
  const classes = useStyles();

  return (
    <div>
      <Button
        variant="contained"
        className={classes.button}
        startIcon={<AddCircleIcon />}
        onClick={onAddClick} // 点击触发新增逻辑
      >
        Add Movement
      </Button>
    </div>
  );
};

3. 改造MovementButton支持输入同步 #

修改MovementButton组件，让它可以把用户输入的运动名称同步到父组件，为后续跳转对应运动追踪页面做准备：

import React from 'react';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
    button: {
        margin: theme.spacing(1),
        background: '#C4C4C4',
        fontFamily: 'PT Sans Caption',
        fontSize: '18px',
        borderRadius: '10px',
        padding: '20px',
        marginTop: '50px',
        width: '700px',
    },
    newMovement: {
        border: 'none',
        padding: '10px',
        fontFamily: 'PT Sans Caption',
        fontSize: '18px',
        borderRadius: '10px',
        background: 'transparent', // 把输入框背景设为透明，和外层按钮风格统一
        width: '100%'
    }
}));

// 接收父组件传入的当前运动id、名称、更新方法
export default function MovementButton({ movementId, movementName, onNameChange }) {
    const classes = useStyles();

    return (
        <Button
            variant="contained"
            className={classes.button}
            // 后续跳转逻辑直接绑在这里，用movementId作为路由参数即可
            onClick={() => console.log(`跳转到运动追踪页，对应id：${movementId}`)}
        >
            <input 
                type="text" 
                placeholder="Enter Movement Here" 
                className={classes.newMovement}
                value={movementName}
                onChange={(e) => onNameChange(movementId, e.target.value)}
                // 阻止输入框点击时触发外层按钮的跳转，避免用户没法正常输入
                onClick={(e) => e.stopPropagation()}
            />
        </Button>
    );
};

注意：原来页面里静态写死的两个<MovementButton />组件直接删掉即可，现在所有的运动按钮都是靠父组件的数组动态渲染的，不需要硬编码。

• 重复样式抽离：两个组件中完全相同的按钮样式，不要分别在各自的makeStyles里重复定义，抽到公共样式文件统一维护，后续调整按钮宽度、颜色时只需要改一处。
• 交互体验优化：给输入框补充stopPropagation逻辑，避免用户点击输入框准备输入时，误触发外层按钮的跳转逻辑。
• 状态管理规范：不要把运动名称存在MovementButton组件本地，所有跟业务相关的数据（运动名称、对应id）都存在父组件中，后续做路由跳转、数据持久化时可以直接读取，不需要跨组件反复传递数据。
• 组件解耦：每个组件只负责自己的展示逻辑，新增数据、更新数据的逻辑统一放在父组件处理，新手开发时不容易出现状态不同步的问题。

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