Javascript 使用React，JSX：如何检索输入值，将其作为元素发布，然后清除它以重复

这是学校的作业。它涉及使用React和JSX创建输入字段和提交按钮。单击按钮时，输入值应作为元素呈现给主体。我可以为第一次点击创建它，但不知道如何重复

如果您查看下面的代码，您将看到当用户键入时，handleChange更改输入状态，当单击按钮时，handleClick更改按钮的布尔状态（称为“post”）。如果post为true，则输入连同时间戳一起呈现为标题

问题是在渲染之后，输入没有被清除。如果用户更改输入并再次单击按钮，则会使用新的时间戳和新输入更新标题，而不是添加另一个标题

我已经尝试在handleClick、handleChange、componentDidMount和componentDidUpdate中更改输入和发布的返回状态。但这会反复调用setState，我会收到一条错误消息“超出了最大更新深度”

所以，我希望它在每次用户单击post按钮时发布输入值的新标题。我还希望它清除输入/占位符文本

import React，{Component}来自'React'；
导入“/App.css”；
从“/Firstposts.jsx”导入Firstposts；
类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
输入：“，
职位：假
}
this.handleChange=this.handleChange.bind（this）；
this.handleClick=this.handleClick.bind（this）；
}
手变（活动）{
this.setState（{input:event.target.value}）；
}
handleClick（）{
这是我的国家({
波斯特：是的
})
}
render（）{
让时间戳=新日期（）；
返回(
啁啾声
邮递
日志
{}
{this.state.post？
{timestamp.toString（）}
{this.state.input}
:
}
);
}
}
导出默认应用程序

更新

handleClick

方法，将

posts

设置为posts数组，而不是布尔值：

handleClick() {
  this.setState({
    posts: [
      ...this.state.posts,
      this.state.input
    ]
  })
}

这将把

This.state.input

的值添加到

This.state.posts

的末尾，保留以前的所有帖子

您可以进一步更新以清除输入字段的值：

handleClick() {
  this.setState({
    posts: [
      ...this.state.posts,
      this.state.input
    ],
    input: '' // add this line to clear your input field when a new post is submitted
  })
}

另外，请确保为

元素提供
值
的
此.state.input
：

<input
  value={this.state.input}
  placeholder="type your message here"
  onChange={this.handleChange}
/>

您可以阅读更多信息。
谢谢@zakangelle。这个解释增加了我对几个主题的学习。
{this.state.posts.map(post => (
  <h4>{post}</h4>
))}