reactjs在兩個組件之間傳輸數據

在Component1.jsx：

import Info from Component2.jsx; 
... 
... 
var dataInfo = "some info.. "; 
<Info dataInfo={dataInfo} /> 
... 
...

在這裏，在上面的代碼中，我們來抓transfering在從component1.jsx形式道具的數據component2.jsx

以相同的方式我們可以傳回數據到component2.jsx到component1.jsx嗎？

請幫我看看這裏。我試圖在谷歌找到答案，但無法正常工作。

來源

2017-05-31 B77

請用修改你的問題更連貫和完整的代碼片段。包含足夠的代碼，以便組件的結構和使用方式顯而易見。 – pscl

感謝您的參考鏈接傢伙。我解決了它.. – B77

是的，你可以傳送回父組件，我會給你一個例子清楚地告訴你如何能做到這一點

假設你有一個家長，它被稱爲COMPONENT1，它有進口作爲一個孩子的形式叫COMPONENT2

爲如下：

import React, { Component } from 'react'; 
export default class Component2 extends Component{ 

constructor() { 
    super(); 

    this.state = { 
     UserName: '', 
     email: '' 
    }; 
    this.onSubmit = this.onSubmit.bind(this) 
} 

onSubmit(e){ 
    e.preventDefault(); 
    var field = { 
     UserName: this.state.UserName, 
     email : this.state.email, 
     password: this.state.password, 
    } 
    **this.props.onUpdate(field);** 
} 
onChange(e){ 
    this.setState({ 
     [e.target.name]: e.target.value 
    }); 
} 
render() { 
    var UserNameError = **this.props.UserNameError**; 
    var emailError = **this.props.emailError**; 

    return(

     <div className="col-md-6 col-sm-6"> 
      <div className="title">Create Account</div> 
      <Form onSubmit={this.onSubmit}> 
       <div className="form-group"> 
        <label>user Name</label> 
        <input onChange={this.onChange.bind(this)} value={this.state.UserName} name='UserName'/> 
        <span className="error is-visible">{UserNameError}</span> 
       </div> 
       <div className="form-group"> 
        <label>Email</label> 
        <input onChange={this.onChange.bind(this)} value={this.state.email} name='email' /> 
        <span className="error is-visible">{emailError}</span> 
       </div> 

       <Button className='btn submit'>Register</Button> 
      </Form> 
     </div> 
    ) 
}}

import React, { Component } from 'react'; 
import Component2 from './Component2' 
export default class Component1 extends Component{ 
    constructor() { 
     super(); 
     this.state = { 
      UserName: '', 
      email: '', 
      UserNameError:' UserNameError ', 
      emailError:' emailError ' 
     }; 
    } 
    onUpdate(val) { 
     this.setState({ 
      email: val.email, 
      UserName: val.UserName, 
     }); 
     console.log(' onSubmit ** email' + val.email + " UserName " + val.UserName) 
    }; 
    render() { 
     return(
      <div className="col-md-6 col-sm-6"> 
       <Component2 **UserNameError={this.state.UserNameError}** **emailError={this.state.emailError}** **onUpdate={this.onUpdate.bind(this)}** /> 
      </div> 
     ) 

    } 
}

我把周圍的句子星星注意到我是如何從父母的Component1數據傳輸錯誤COMPONENT2

和我如何通過的onUpdate函數從孩子送到表格數據COMPONENT2到COMPONENT1

來源

2017-05-31 12:06:48

感謝您的代碼。我已經實現了相同的模式，但最終出現錯誤「setState（...）：無法在現有狀態轉換期間更新（例如在'render'或另一個組件的構造函數中）。渲染方法應該是道具和狀態的純函數;構造函數的副作用是反模式，但可以移動到'componentWillMount'。「。當您調用onUpdate（val）{this.setState（{...}）}時發生該錯誤。有沒有其他方法，我們可以將onUpdate（）函數的值存儲到setState中嗎？ – B77

是的，你是對的，我更新了代碼，現在你可以使用代碼而沒有任何錯誤，我試了一下。由我對不起，我忘了設置onChange函數來獲取新值，當你在輸入標籤寫入時，我還發現另一件事情我更改代碼使用變量{UserNameError}而不是{this.state.UserNameError}相同作爲emailError， –

感謝您的更新。我會研究它... – B77

reactjs在兩個組件之間傳輸數據

回答

相關問題