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

Question

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

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

问题在于渲染之后，输入不会被清除。 如果用户更改输入并再次单击按钮，它将使用新的时间戳和新的输入来更新标题，而不是添加其他标题。

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

因此，我要执行的操作是每当用户单击发布按钮时就发布输入值的新标题。 我也希望它清除输入/占位符文本。

 import React, { Component } from 'react'; import './App.css'; import Firstposts from './firstposts.jsx'; class App extends Component { constructor(props) { super(props) this.state = { input: "", post: false } this.handleChange = this.handleChange.bind(this); this.handleClick = this.handleClick.bind(this); } handleChange(event) { this.setState({ input: event.target.value }); } handleClick() { this.setState({ post: true }) } render() { let timestamp = new Date(); return ( <div className="container"> <div className="panel"> <img height="100 px" src="https://marketing.twitter.com/content/dam/marketing-twitter/brand/logo.png" alt=""></img> <h1>Chirper</h1> </div> <div className="body"> <input placeholder="type your message here" onChange={this.handleChange} /> <button onClick={this.handleClick} >Post</button> <h2>Log</h2> {<Firstposts />} {this.state.post ? <div> <h3>{timestamp.toString()}</h3> <h4>{this.state.input}</h4> </div> : <div /> } </div> </div > ); } } export default App; 

Answer 1

更新您的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
  })
}

另外，请确保为您的<input>元素this.state.input的value ：

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

否则，您将无法使用setState以编程方式更新<input>字段的值。 您可以在React中阅读更多有关不受控制的组件的信息 。

然后，更新您的render方法以map到this.state.posts并渲染每个：

{this.state.posts.map(post => (
  <h4>{post}</h4>
))}

您可以在React中阅读有关渲染列表的更多信息。