React如何实现对简历模板的实时编辑和拖拽功能？

来问一个问题：如何实现对简历模板的实时编辑和拖拽功能？
在React中，我想实现在网页上一半可以填写个人信息，另一半会在简历模版上实时现实该信息内容。例如这种：

我知道大概步骤：

解析简历模板
将简历内容拆分为独立部分
实现实时编辑功能
实现拖动功能.
但是不清楚具体实现方法

回答：实时显示不好看哎，网页就那么大，你要是分成两部分很影响使用的，你可以提供一个预览按钮，然后设置实时保存，让他自己选择去预览查看效果，一般现在的都是这样；或者你也可以选择和“全民简历”里面的一样，采用表单式的填入，然后在网页里面会实时更新，这个感觉也不错；不要去把它分为左右两部分，分为左右两部分是不方便查看与使用的，太小了

1.解析简历模板：将用户上传的初始文件通过接口传递给后端，让后端去做文件解析（这个一般后端可以调用阿里云等提供的第三那方库），后端处理完返回包含简历内容的数据结构；
2.数据绑定，实现实时编辑：将从后端获取的初始数据存放到state中，就可以在用户输入时，修改state，借助React框架完成实时编辑；
3.拖放功能：使用h5的dragAPI
以上是各个功能的基本方案，如果想让网友在这给出具体的实现，那工作量太大了。

你可以看下这个问题的回答https://ask.csdn.net/questions/963550
这篇博客也不错, 你可以看下[项目实战，源码完整]手把手教你怎么封装组件，React 重写学成在线 III
除此之外, 这篇博客: React中函数组件与类组件中的 假设函数式组件不存在。我们将如何解决这个问题？ 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
我们想要以某种方式“修复”拥有正确 props 的渲染与读取这些 props 的 showMessage 回调之间的联系。在某个地方 props 被弄丢了。一种方法是在调用事件之前读取 this.props，然后将他们显式地传递到 timeout 回调函数中去：
```
class ProfilePage extends React.Component {
  showMessage = (user) => {
    alert('Followed ' + user);
  };
  handleClick = () => {
    const {user} = this.props;
    setTimeout(() => this.showMessage(user), 3000);
  };
  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }
}
```
这种方法会起作用。然而，这种方法使得代码明显变得更加冗长，并且随着时间推移容易出错。如果我们需要的不止是一个props怎么办？如果我们还需要访问state怎么办？如果 showMessage 调用了另一个方法，然后那个方法中读取了 this.props.xxx 或者 this.state.xxx，我们又将遇到同样的问题。然后我们不得不将 this.props 和 this.state 以函数参数的形式在被 showMessage 调用的每个方法中一路传递下去。这个问题并不是React所独有的 —— 你可以在任何一个将数据放入类似 this 这样的可变对象中的UI库中重现它。