如何无限次重复 React 元素？

Question

我正在构建一个表单，让用户填写无限数量的动物的名字。 问题的末尾是可点击的文本，显示了填写其他动物名称的选项。 我如何让这个过程无限次地发生，因为现在我可以单击它一次以显示额外的字段，但不能再次单击它。

因为每个字段都需要和后端数据库单独核对，所以每个额外的字段在出现和填写时都不能被覆盖。

下面是我的代码片段和显示额外字段后的页面截图。

提前致谢

const CustomModel = (props) => {
  const { classes, ...rest } = props;

  const [showNextAnimal, setShowNextAnimal] = React.useState(false);
  const onClick = () => setShowNextAnimal(true);

  const AnotherAnimal = () => (
    <div>
      <h4>What other animal are you looking for?</h4>
      <div className={classes.inputbar}>
        <InputBase
          placeholder="Enter name of animal"
          classes={{
            root: classes.inputRoot,
            input: classes.inputInput,
          }}
          inputProps={{ 'aria-label': 'description' }}
        />
      </div>
      <br />
    </div>
  );

  return (
    <main className={classes.content}>
      <div className={classes.toolbar} />
      <GridContainer>
        <GridItem xs={12} sm={12} md={12}>
          <Paper className={classes.paper}>
            <h2>Create a new model</h2>
            <Divider />

            <h4>Name?</h4>
            <div className={classes.inputbar}>
              <InputBase
                placeholder="Feel free to be creative!"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'name' }}
              />
            </div>
            <br />
            <h4>Description</h4>
            <div className={classes.inputbar}>
              <InputBase
                placeholder="Enter your description"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'description' }}
              />
            </div>
            <br />
            <h4>What animal are you looking for?</h4>
            <div className={classes.inputbar}>
              <InputBase
                placeholder="Enter name of animal"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'description' }}
              />
            </div>
            <br />
            {showNextAnimal ? <AnotherAnimal /> : null}
            <div>
              <h4 onClick={onClick}>+ Add another animal</h4>
              <br />
            </div>
            <Button
              color="primary"
              variant="contained"
              type="submit"
              className={classes.continueButton}
              // onClick={(updateFormValues, handleClick)}
            >
              Review
            </Button>

            <br />
          </Paper>
        </GridItem>
      </GridContainer>
      <StickyFooter />
    </main>
  );
};

export default withStyles(styles)(CustomModel);

Answer 1

您应该使用计数变量，然后单击Add new animal ，增加计数变量。 在正文中，显示<AnotherAnimal /> count次数。

const CustomModel = (props) => {
  const { classes, ...rest } = props;

  const [countOfOtherAnimals, setCountOfOtherAnimals] = React.useState(0);
  const onClick = () => setCountOfOtherAnimals(countOfOtherAnimals + 1);

  const AnotherAnimal = () => (
    <div>
      <h4>What other animal are you looking for?</h4>
      <div className={classes.inputbar}>
        <InputBase
          placeholder="Enter name of animal"
          classes={{
            root: classes.inputRoot,
            input: classes.inputInput,
          }}
          inputProps={{ 'aria-label': 'description' }}
        />
      </div>
      <br />
    </div>
  );

  return (
    <main className={classes.content}>
      <div className={classes.toolbar} />
      <GridContainer>
        <GridItem xs={12} sm={12} md={12}>
          <Paper className={classes.paper}>
            <h2>Create a new model</h2>
            <Divider />

            <h4>Name?</h4>
            <div className={classes.inputbar}>
              <InputBase
                placeholder="Feel free to be creative!"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'name' }}
              />
            </div>
            <br />
            <h4>Description</h4>
            <div className={classes.inputbar}>
              <InputBase
                placeholder="Enter your description"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'description' }}
              />
            </div>
            <br />
            <h4>What animal are you looking for?</h4>
            <div className={classes.inputbar}>
              <InputBase
                placeholder="Enter name of animal"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'description' }}
              />
            </div>
            <br />
            {
              [...Array(countOfOtherAnimals)].map((e, i) => (
                <AnotherAnimal key={i} />
              ))
            }
            <div>
              <h4 onClick={onClick}>+ Add another animal</h4>
              <br />
            </div>
            <Button
              color="primary"
              variant="contained"
              type="submit"
              className={classes.continueButton}
              // onClick={(updateFormValues, handleClick)}
            >
              Review
            </Button>

            <br />
          </Paper>
        </GridItem>
      </GridContainer>
      <StickyFooter />
    </main>
  );
};

export default withStyles(styles)(CustomModel);