Question

我在SilverStripe 4项目中嵌套了一个react-app。我正在尝试在SilverStripe项目中正确集成react-app，以便可以将react-app创建的文件保存到SilverStripe后端。嵌套的方式类似于针对此问题提供的解决方案：

How to insert (inject?) an existing React app (just a UI without a backend) into a SilverStripe page layout?

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
    });
  };

以下是与“保存”按钮相关的return方法中的代码

 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数据库中的表中。

感谢您的阅读时间。如果您发现缺少信息，请发表评论。我将继续研究如何做到这一点，并在评论中查找答案，以解决这一问题。欢呼声：-）

如何将来自React应用的txt文件保存到SilverStripe 4后端？

0 个答案: