如何無限次重復 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);