メテオデータからの反応状態の設定

Question

開発者！誰かが私を助けることができますか？私は入力の代わりにthis.props.emailからthis.state.emailを設定することができますどのように流星データから反応し、入力からこのstateデータを編集して、私がstateを設定しようとしている 、それは

---

class Profile extends Component{ 
    constructor(props){ 
    super(props); 
    this.editProfileBind = this.editProfile.bind(this); 
    this.testEmailBind = this.testEmail.bind(this); } 

    testEmail(e){ 
    const input = e.target; 
    this.setState({ 
     email: input.value 
    }); 
    input.value = this.state.email; 
    } 

    editProfile(e){ 
     e.preventDefault(); 
    } 

    render(){ 
    return(
     <form className="col-md-4 col-xs-6" 
      onSubmit={this.editProfileBind}> 
      <input type="email" 
        onChange={this.testEmailBind} 
        value={this.props.email || ''} 
       /> 
      <button type="submit">Submit</button> 
     </form> 
    ) 
} 
} // end component 

export default createContainer(() => { 
    const user = Meteor.user(); 
    const email = user.emails && user.emails[0].address; 

    return { email }; 
}, Profile); 

のように見えますが、あなたは私をお勧めすることはできますか？ありがとう！コードと

Answer 1

カップルの問題：コンストラクタで小道具

と

1. Intialize状態は、あなたがに渡されるemail小道具にあなたの初期状態を設定する必要が

。 2.入力valueは、this.state.email

と等しくなければならない。値isnあなたのtestEmail機能が更新されているemail状態の代わりに、渡されているプロップ（変更されていない）に値を設定しているため、更新していません。新しい小道具と

3.アップデート状態は

あなたは、新しいデータがProfileコンポーネントに渡されたとき、あなたのemail状態を更新componentWillReceiveProps機能を追加する必要があります。

Profileコンポーネントは次のようになります。

class Profile extends Component{ 
    constructor(props){ 
    super(props); 
    this.editProfileBind = this.editProfile.bind(this); 
    this.testEmailBind = this.testEmail.bind(this); 
    this.state = { 
     email: props.email 
    } 
    } 

    testEmail(e){ 
    const input = e.target; 
    this.setState({ 
     email: input.value 
    }); 
    } 

    editProfile(e){ 
     e.preventDefault(); 
    } 

    componentWillReceiveProps(nextProps){ 
    this.setState({ 
     email: nextProps.email 
    }); 
    } 

    render(){ 
    return(
     <form className="col-md-4 col-xs-6" 
      onSubmit={this.editProfileBind}> 
      <input type="email" 
        onChange={this.testEmailBind} 
        value={this.state.email} 
       /> 
      <button type="submit">Submit</button> 
     </form> 
    ) 
} 
} // end component 

export default createContainer(() => { 
    const user = Meteor.user(); 
    const email = user.emails && user.emails[0].address; 

    return { email }; 
}, Profile);