README

此模块负责在Silverstripe CMS中渲染自定义React表单字段。这对于CMS中不是用React构建的部分很有用。

安装

composer install violet88/silverstripe-react-bridge

用法

1. 创建React组件

为您的自定义字段创建一个React组件。该模块将以下属性传递给您的组件

• name：字段的名称
• value：字段的值
• onAutofill：您应传递新值以及字段名称的函数。这将更新CMS中字段的值。您可以按如下方式传递新值

onAutofill(name, value)

2. 注册React组件

通过调用SilverStripe的lib/Injector中的registerMany函数来注册您的React组件

import Injector from 'lib/Injector';
import SecretField from "./SecretField";

Injector.component.registerMany({
    SecretField
});

建议您为注册组件创建一个特定的javascript文件，并将其包含在项目中。我个人将其放在boot文件夹中。它看起来像这样

import Injector from 'lib/Injector';
import SecretField from "../SecretField";

export default () => {
    Injector.component.registerMany({
        SecretField
    });
};

之后，我会在main.js文件中使用此文件，如下所示

/* global window */
import registerComponents from 'boot/registerComponents';

window.document.addEventListener('DOMContentLoaded', () => {
    registerComponents();
});

3. 将javascript添加到CMS

将javascript文件添加到CMS。您可以通过将以下内容添加到您的config.yml来完成此操作

SilverStripe\Admin\LeftAndMain:
  extra_requirements_javascript:
    - 'app/client/dist/js/bundle.js'

您必须将'app/client/dist/js/bundle.js'替换为您的编译javascript文件的路径。

4. 创建自定义字段的PHP类

现在我们将创建一个自定义字段的PHP类。此类将扩展ReactFormField。它将像Silverstripe中的任何其他表单字段一样工作。您可以在此类中添加自己的逻辑。例如，您可以为字段添加验证或自定义逻辑。唯一的区别是，您将传递一个React组件名称

<?php

use Violet88\SilverstripeReactBridge\ReactFormField;

class MySecretFormField extends ReactFormField
{

    public function __construct($name, $title = null, $value = null)
    {
        parent::__construct($name, 'SecretField', $title, $value);
    }

}

在这种情况下，'SecretField'（传递给父构造函数的第二个参数）是我们第2步中注册的React组件的名称。

5. 在表单中使用自定义字段

您现在可以使用自定义字段在表单中像任何其他表单字段一样使用。例如

$fields->addFieldToTab('Root.Main', MySecretFormField::create('SecretField', 'Secret Field'));