reactjs - 在 React 中更新用户个人资料信息客户端

Question

所以我想让用户在 React 客户端自动更新他们的个人资料信息(类似于 Medium，如果有人熟悉的话)。当我单击编辑按钮时，它允许我编辑名称、生物文本和图像状态。有没有好的方法来处理这个问题？代码如下。

// 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

您想实现一个内联编辑功能。

你可以自己做:

当用户点击编辑按钮时，您的个人资料信息 View 呈现为包含值的表单，当您完成编辑(例如点击保存)时，您的表单再次切换到该 View 。

但是，也有像这样的组件(没试过，但也许有帮助)

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