Question

所以我想允许用户在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

您希望实施内联编辑功能。

你可以自己做：

当用户点击编辑按钮时，您的个人资料信息视图会显示为包含值的表单，当您完成编辑后（例如，单击“保存”），您的表单会再次切换到该视图。

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

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

在React中更新用户配置文件信息客户端

1 个答案: