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

【问题标题】：React JS How to make a Button create another ButtonReact JS 如何让一个按钮创建另一个按钮
【发布时间】：2021-03-11 02:07:22
【问题描述】：

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

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

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>
    );
};

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

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

【问题讨论】：

为什么你在Button里面使用input type='text'的目的是什么？
我想让用户输入他们自己的运动动作，我认为输入 type="text" 是让他们这样做的最佳方式。如果您对如何以不同方式/更好的方式进行操作有任何建议，我会很乐意提供帮助。
您在 div 元素中添加按钮和输入（不要在按钮内使用 input type =' text' 因为如果您为按钮添加 onClick 事件并单击输入，则 Onclick 事件总是会触发)

标签： reactjs button add

【解决方案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>
  );
};

【讨论】：