Javascript 我如何继续添加用户名和状态，而不是更新reactJS中的前一个用户名和状态？

我有两个部分。一个名为“Adduser”的文件，其中包含表单元素，以便用户可以添加帖子的详细信息。另一个名为“PostAdded”，我想在其中显示列表项中的所有帖子。每次单击时，我都希望“Adduser”从输入元素中获取数据并将其传递给“PostAdded”，这样“PostAdded”就可以在新div中显示每个单独的帖子（标题和帖子一起），而不是更新以前的帖子。最好的方法是什么

文件'Adduser.js'

class AddUser extends Component {
constructor(props) {
    super();
    this.state = {
        title : "",
        post : "",
    }
    this.handleclick = this.handleclick.bind(this);
}

handleclick() {
this.setState(prevState => ({
    title : document.getElementById("title").value,
    post : document.getElementById("post").value,
}));
}
render() {
    return(
        <div>
            <input type="text" id="title" placeholder="Title here" />
            <input type="text" id="post" placeholder="Post here" />
            <input type="button" onClick={this.handleclick} value="Add Post" /> 
            <PostAdded posts={this.state.post} /> 
        </div>
        )
    }    
}

export default AddUser; 

class AddUser扩展组件{
建造师（道具）{
超级（）；
此.state={
标题：“，
职位：“，
}
this.handleclick=this.handleclick.bind（this）；
}
handleclick（）{
this.setState（prevState=>({
标题：document.getElementById（“标题”）.value，
post:document.getElementById（“post”）.value，
}));
}
render（）{
返回(
)
}    
}
导出默认AddUser；

文件'PostAdded.js'

import React, {Component} from 'react';    
class PostAdded extends Component {
    constructor(props) {
      super();
    }

    render() {
            return <ul>
            { this.props.posts.map(post =>
            <li>{post}</li> 
            )}        
            </ul>

        }    
    }

export default PostAdded;

import React，{Component}来自'React'；
类PostAdded扩展组件{
建造师（道具）{
超级（）；
}
render（）{
返回

{this.props.posts.map（post=>
{post}
)}        

}    
}
导出默认邮资；

在

AddUser

组件中更改

状态和
handleclick
方法。我没有修改你的代码太多，所以你可以很容易地理解它

class AddUser extends Component {
  constructor(props) {
      super();
      this.state = {
        posts: [], 
      }
      this.handleclick = this.handleclick.bind(this);
  }

  handleclick() {
    // accessing values from the input
    let title =  document.getElementById("title").value
    let post = document.getElementById("post").value
    // creating a new object
    let newPostObj = {title, post}
    // concatenating new object to component posts state
    let newPost = this.state.posts.concat(newPostObj)
    // setting newPost as component new state
    this.setState({
      posts: newPost
    })
    // emptying the input fields
    document.getElementById("title").value = ''
    document.getElementById("post").value = ''
  }

  render() {
      return(
          <div>
              <input type="text" id="title"  placeholder="Title here" />
              <input type="text" id="post" placeholder="Post here" />
              <input type="button" onClick={this.handleclick} value="Add Post" /> 
              <PostAdded posts={this.state.posts} /> 
          </div>
          )
      }    
  }

更新

更改
AddUser
组件

class AddUser extends Component {
  constructor(props) {
      super();
      this.state = {
        posts: [], 
        title: '',
        post: ''
      }
      this.handleClick = this.handleClick.bind(this);
      this.handleChange = this.handleChange.bind(this);
  }

  // called when we type something in input fields
  handleChange(e) {
   // you can console log here to see e.target.name and e.target.value
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  handleClick() {
    // using spread operator to copy previous state posts and adding new post object 
    let newPosts = [ ...this.state.posts, { title: this.state.title, post: this.state.post}]
    this.setState({
       posts: newPosts,
       title: '',
       post: ''
    })
  }

  render() {
      return(
          <div>
              // added name,value attributes and onChange listener
              <input type="text" name="title" value={this.state.title} onChange={this.handleChange} placeholder="Title here" />
              <input type="text" name="post" value={this.state.post} onChange={this.handleChange} placeholder="Post here" />
              <input type="button" onClick={this.handleClick} value="Add Post" /> 
              <PostAdded posts={this.state.posts} /> 
          </div>
          )
      }    
  }

class AddUser扩展组件{
建造师（道具）{
超级（）；
此.state={
员额：[]，
标题：“”，
帖子：“”
}
this.handleClick=this.handleClick.bind（this）；
this.handleChange=this.handleChange.bind（this）；
}
//在输入字段中键入内容时调用
手变（e）{
//您可以在此控制台登录以查看e.target.name和e.target.value
这是我的国家({
[e.target.name]：e.target.value
})
}
handleClick（）{
//使用spread操作符复制以前的状态帖子并添加新的帖子对象
让newPosts=[…this.state.posts，{title:this.state.title，post:this.state.post}]
这是我的国家({
职位：新职位，
标题：“”，
帖子：“”
})
}
render（）{
返回(
//添加了名称、值属性和onChange侦听器
)
}    
}
是的，非常感谢。它起作用了。
中的“键”是什么？另外，我在某个地方读到concat方法存在性能问题，或者它已被弃用（我记不清了）。还有别的方法吗？这是我的荣幸。每当我们映射一个数组并返回react中的元素时，我们都使用
key
props。若我们不使用它，react会在控制台中发出一些警告。是的，这可以用更多的方式来做，但我用了你的方式。如果你需要另一种方式，我会更新它。
class AddUser extends Component {
  constructor(props) {
      super();
      this.state = {
        posts: [], 
        title: '',
        post: ''
      }
      this.handleClick = this.handleClick.bind(this);
      this.handleChange = this.handleChange.bind(this);
  }

  // called when we type something in input fields
  handleChange(e) {
   // you can console log here to see e.target.name and e.target.value
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  handleClick() {
    // using spread operator to copy previous state posts and adding new post object 
    let newPosts = [ ...this.state.posts, { title: this.state.title, post: this.state.post}]
    this.setState({
       posts: newPosts,
       title: '',
       post: ''
    })
  }

  render() {
      return(
          <div>
              // added name,value attributes and onChange listener
              <input type="text" name="title" value={this.state.title} onChange={this.handleChange} placeholder="Title here" />
              <input type="text" name="post" value={this.state.post} onChange={this.handleChange} placeholder="Post here" />
              <input type="button" onClick={this.handleClick} value="Add Post" /> 
              <PostAdded posts={this.state.posts} /> 
          </div>
          )
      }    
  }