使用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中閱讀有關渲染列表的更多信息。