reactjs - 如何将 React 应用程序中的 txt 文件保存到 SilverStripe 4 后端？

Question

我有一个嵌套在 SilverStripe 4 项目中的反应应用程序。我正在尝试将 react-app 正确集成到 SilverStripe 项目中，以便将 react-app 创建的文件保存到 SilverStripe 后端。它的嵌套方式类似于为这个问题提供的解决方案：

如何将现有的 React 应用程序（只是没有后端的 UI）插入（注入？）到 SilverStripe 页面布局中？

react-app 创建一个图表并有一个保存按钮，该按钮从图表中获取信息并创建一个 txt 文件，然后可以将其保存到我的本地系统。除此之外，我希望保存按钮将 txt 文件发送到 SilverStripe 项目（包装了 react-app）中的适当表中。

目前我正在学习 SilverStripe 框架，你可以看到我的页面控制器中还没有任何东西可以帮助我做到这一点。非常感谢任何关于我可能需要的建议。

以下是 react-app 中本地保存和加载 txt 文件的方法：

  saveJson = () => {
    const validJson = this.state.json;
    window.localStorage.setItem(LOCALSTORAGE_KEY, validJson);
  };

  loadJson = () => {
    const json =
      window.localStorage.getItem(LOCALSTORAGE_KEY) ||
      JSON.stringify(this.state.High, null, 2);
    this.setState({ json });
  };

...

 dataToSave = () => {
    let data = {};
    data.High = this.checkStateArrayForData("High");
    data.Intermediate = this.checkStateArrayForData("Intermediate");
    data.Low = this.checkStateArrayForData("Low");
    data.Output = this.checkStateArrayForData("Output");
    data.Input = this.checkStateArrayForData("Input");
    data.links = this.state.links;
    return data;
  };

...

 onReaderLoad = event => {
    let obj = JSON.parse(event.target.result);
    let time = new Date().getTime();
    this.setState({
      High: obj.High,
      Intermediate: obj.Intermediate,
      Low: obj.Low,
      Output: obj.Output,
      Input: obj.Input,
      linksToRender: obj.links,
      time: time
    });
  };

下面是返回方法中与保存按钮相关的代码

 render() {
    const uri =
      "data:text/json;charset=UTF-8," +
      encodeURIComponent(JSON.stringify(this.dataToSave(), null, 2));

...

return(
...

  <input
                type="file"
                id="file"
                ref={ref => (this.upload = ref)}
                style={{ display: "none" }}
                onChange={this.onChangeFile}
                accept=".txt"
              />
              <ToolbarItem
                icon="ic-open"
                label="Open"
                onClick={() => {
                  this.upload.click();
                }}
              />
              <a href={uri} download="myfile.eval">
                <ToolbarItem icon="ic-save" label="Save" />
              </a>

下面是 ToolbarItem 组件，因为保存按钮是 ToolbarItem 组件。注意：我继承了这个代码，它是别人编写的原型。我认为这个组件应该是功能性的并且没有状态。

import React from "react";

class ToolbarItem extends React.Component {
    state = {};

    render() {
        return <div className="item" onClick={this.props.onClick}>
            <div className={`icon ${this.props.icon}`}></div>
            <div className="label">{this.props.label}</div>
        </div>;
    }
}

export default ToolbarItem;

下面是 SilverStripe 页面布局：

<!-- BEGIN CONTENT -->
        <div class="content">   
                    <div class="main col-sm-12" 
                         style="padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px;"> 

                            <div id="root">
                                If you can see this your React app hasn't initialised yet
                            </div>
                    </div>
        </div>
        <!-- END CONTENT -->

下面是我的 react-app 的 SilverStripe 类：

<?php
namespace SilverStripe\Lessons;

use Page;    
use SilverStripe\Assets\File;

class ReactAppPage extends Page 
{
  private static $table_name = 'example5_ReactAppPage';
  private static $has_one  = [
      'svg' => File::class,
      'woff' => File::class,
      'woff2' => File::class,
      'ttf' => File::class,
      'eot' => File::class,
    ];
}
?>

下面是 react 应用的页面控制器：

<?php
namespace SilverStripe\Lessons;

use SilverStripe\View\Requirements;

use PageController;    

class ReactAppPageController extends PageController 
{
    protected function init()
    {
        parent::init();
        // Build files for the react-app. NOTE: Doesn't include media folder files which are manually placed in a SilverStripe-app/public/static/media folder.
        Requirements::javascript('app/react-app/build/static/js/main.40bb7a47.js');
        Requirements::css('app/react-app/build/static/css/main.ca3832cb.css');

    }
}
?>

预期的结果是，在用户点击 react-app 中的保存按钮后，他们将可以选择保存文件的位置（本地或 SilverStripe 后端）。如果他们选择 SilverStripe 后端，文件将自动保存到 SilverStripe 数据库中的表中。

感谢您花时间阅读。如果您发现缺少信息，请发表评论。我将编辑这个问题，因为我将继续研究如何做到这一点，并将使用评论来寻找答案。干杯:-)

标签： reactjssilverstripe-4