使用 React/Material UI 添加多个 div 和输入值

Question

我在将多个 div 添加到 React 页面并将输入的值发送到 API 时遇到问题。现在我有一个按钮，它添加了一个 div，其中有一个文本输入框，用户可以输入答案。但是，每次制作一个新盒子时，用户的答案都会根据状态存储，每次接收一个字母。下面是生成的新 div 的代码：

const AnotherName = (key) => (
<div id={countOfOtherNames}>
  <GridContainer>
    <GridItem xs={6} sm={6} md={6}>
      <h4>What other animal are you looking for?</h4>
      <div className={classes.inputbar}>
        <InputBase
          placeholder="Enter name"
          classes={{
            root: classes.inputRoot,
            input: classes.inputInput,
          }}
          inputProps={{ 'aria-label': 'description' }}
        />
      </div>
      <br />
    </GridItem>
  </GridContainer>
</div>

);

我不知道如何在每次打开盒子时创建多个状态，但这似乎是一种幼稚的做法。有没有更好的方法在用户完成输入后存储每个输入？

Answer 1

您可以将输入值存储在对象中，并在焦点更改时保存。