Question

所以我有一个“添加”按钮，点击后，我想打开另一个按钮，用户可以在其中添加一些文本。第二个（新打开的）按钮是按钮的原因是因为它将用作到另一个页面的链接。如果有人想知道，我正在尝试构建一个应用程序，人们可以在其中跟踪某些练习/动作。第一页将是他们写下他们想要跟踪的动作的名称的地方。

这是我的“添加”按钮代码：

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() {
  const classes = useStyles();

  return (
    <div>
      <Button
        variant="contained"
        className={classes.button}
        startIcon={<AddCircleIcon />}>
        Add Movement
      </Button>
    </div>
  );
};

这是我想在点击“添加”后出现的按钮的代码：

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',

    }
}));

export default function MovementButton(props) {
    const classes = useStyles();
    //const [ exercise ] = useState(props.exercise)

    return (
        <Button
            variant="contained"
            className={classes.button}>
            <input type="text" placeholder="Enter Movement Here" className={classes.newMovement}/>
        </Button>
    );
};

这是我浏览器上的图片。显示“在此处输入运动”的两个按钮之所以在那里，是因为我在主页中调用了它们。目标是让主页从“添加动作”按钮开始，然后随着用户添加动作而增长。

如果我遗漏了任何需要的信息，请告诉我，而且我对编码还很陌生，因此任何其他提示/更正将不胜感激。谢谢各位！

Answer 1

您可以创建一个状态来计算按钮点击次数，使用 for 循环生成按钮。

import React, {useState} 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() {
  const classes = useStyles();
  const [count, setCount] = useState(0);

  const generateButton s= () => {
    let buttons = [];
    for(let i = 0; i < count; i++) {
       buttons.push(<MovementButton />);
    }
    return buttons;
  }

  return (
    <div>
      {generateButtons()}
      <Button
        variant="contained"
        className={classes.button}
        onClick={() => setCount(count => count + 1)}
        startIcon={<AddCircleIcon />}>
        Add Movement
      </Button>
    </div>
  );
};

React JS 如何让一个按钮创建另一个按钮

1 个答案: