ユーザープロファイル情報をクライアント側に更新する

Question

したがって、ユーザーがReact（React）の中のプロファイル情報クライアント側を自動的に更新できるようにしたいと思います。編集ボタンをクリックすると、名前、bioText、およびイメージの状態を編集できます。これを処理する良い方法はありますか？コードは以下の通りです。

// Main Profile Container 

var ProfileContainer = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <ProfileHeader {...this.props} /> 
     <ProfileCollection {...this.props} /> 
     </div> 
    ); 
    } 
}); 

// Profile Header Container 

var ProfileHeader = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <ProfilePicContainer {...this.props} /> 
     <ProfileNameContainer {...this.props} /> 
     <ProfileBioContainer /> 
     <EditProfileButtonContainer /> 
     </div> 
    ); 
    } 
}); 

// Profile Collection 

var ProfileCollection = React.createClass({ 
    render: function() { 
    return (
     <h1>Collection Container</h1> 
    ); 
    } 
}); 

// Profile Pic Component 

var ProfilePicContainer = React.createClass({ 
    getInitialState: function() { 
    return { 
     image: this.props.user.userImage 
    } 
    }, 
    render: function() { 
    return (
     <ProfilePic {...this.props} /> 
    ); 
    } 
}); 

var ProfilePic = React.createClass({ 
    render: function() { 
     return (
     <img src={this.props.user.userImage} alt="profile-picture" /> 
    ); 
    } 
}); 

// Profile Name Component 

var ProfileNameContainer = React.createClass({ 
    getInitialState: function() { 
     return { 
     name: this.props.user.userName 
     } 
    }, 
    render: function() { 
     return (
     <ProfileName {...this.props} /> 
    ); 
    } 
}); 

var ProfileName = React.createClass({ 
    render: function() { 
     return (
     <h2>{this.props.user.userName}</h2> 
    ); 
    } 
}); 

// Profile Bio Component 

var ProfileBioContainer = React.createClass({ 
    getInitialState: function() { 
     return { 
     bioText: "" 
     } 
    }, 
    render: function() { 
     return (
     <ProfileBio bioText={this.state.bioText} /> 
    ); 
    } 
}); 

var ProfileBio = React.createClass({ 
    render: function() { 
     return (
     <p>{this.props.bioText}</p> 
    ); 
    } 
}); 

// Edit Profile Button 

var EditProfileButtonContainer = React.createClass({ 
    updateInfo: function() { 
    // Code 
    }, 
    render: function() { 
    return (
     <EditProfileButton updateInfo={this.updateInfo}/> 
    ); 
    } 
}); 

var EditProfileButton = React.createClass({ 
    render: function() { 
    return (
     <button onClick={this.props.updateInfo}>Edit</button> 
    ); 
    } 
}); 

var user = { 
    userName: "Maxwell Gover", 
    userImage: "https://addons.cdn.mozilla.net/user-media/userpics/0/0/45.png?modified=1447324257" 
}; 

ReactDOM.render(<ProfileContainer user={user} />, document.getElementById('content')); 

Answer 1

あなたはインライン編集機能を実装したいと思います。

あなたが自分でそれを行うことができます：

をユーザーが編集ボタンをクリックすると、プロフィール情報ビューは、値を持つフォームとしてレンダリングして、あなたは（たとえば、保存をクリックしてください）にフォームのスイッチ編集が終了したら、もう一度見てください。

しかし、このような本のためのコンポーネント（did'tはそれを試してみましたが、多分それは役立ちます）

https://www.npmjs.com/package/react-edit-inline

もあります