使用React/Material UI添加多个Div并输入值

Question

我在向React页面添加多个div并将输入的值发送到API时遇到问题。现在我有一个按钮，它添加了一个div，这个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

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