如何在 ReactJS 中存储、提交和复制表单输入到另一个组件

Question

我声明我没有太多经验，我是一名统计学家。我正在创建一个小应用程序，我想复制在网站主仪表板的表单中输入的数据。仪表板和表单是两个独立的组件。我只能在自身复制表单数据，但无法将数据导出到仪表板。

我想要实现的是登录用户可以在 public 仪表板中 post 个人广告，并且它仍然保存并且对所有用户可见。

    constructor(props){
    
super(props)
    
this.state = {
      
Name: '',
      
Country: '',
     
 Business: '',
     
 Size: '',
     
 Wishlist: '',
     
Detail: '',
submittedData: []  } }

  handleName = event => {
   this.setState({
      Name: event.target.value
    })
  }
  
handleCountry = event => {
    this.setState({
      Country: event.target.value
    })
  }

  handleBusiness = event => {
    this.setState({
      Business: event.target.value
    })
  }
  
handleWishlist = event => {
    this.setState({
      Wishlist: event.target.value
    })
  }
 
 handleDetail = event => {
    this.setState({
      Detail: event.target.value
    })
  }

  
handleSubmit = event => {
    event.preventDefault()
    
let formData = { Name:this.state.Name, Country: this.state.Country, Business: this.state.Business,  Whishlist: this.state.Whishlist, Detail: this.state.Detail}
    
let dataArray = this.state.submittedData.concat(formData)
    
this.setState({submittedData: dataArray})
  }

通过这种方式收集的数据只是在表单页面上的一个副本，它不会保存它，我无法将它导出到其他任何地方。

在我使用的表格中：

<Form onSubmit={event => this.handleSubmit(event)} >
    
onChange={event => this.handleName(event)}
                  value={this.state.Name} >
<Button>
     <input type="submit" value="Submit" onClick={this.submitForm}/>
</Button>

更清楚：我想要一个类似于 facebook 的机制，用户在主页上写一个 post，然后将其复制并保存在他的个人资料中。我没有填写 facebook 主页文本区域。

如果解释太长我就不求详细的描述了，一个攻略就可以解决这个问题了。我不知道该去哪里找了。

P.S。我知道写“页面”是不合适的，因为我的应用程序是单页的。

Answer 1

我真的不明白你的问题，但你可以使用 LocalStorage 通过页面移动数据

因此，在您的表单中，您可以将表单详细信息另存为

localStorage.setitem('data',JSON.stringify(dataArray))

然后使用

在另一个页面上获取它

    let data = JSON.parse(localStorage.getitem('data'))

如何在 ReactJS 中存储、提交和复制表单输入到另一个组件

How to store, submit and copy input from form to another component in ReactJS

web-applications

reactjs

react-redux