Wordpress Gutenberg自动完成功能-保存属性

Question

我想开发一个自定义块，使用户可以从自动完成中选择一些信息。我设法在编辑功能上创建自动完成组件。

用户可以选择一个项目，但是我不知道如何处理属性保存。

我正在尝试将所选项目保存为属性package_name。我在自动完成组件上创建了onChange函数，但event.target.value未定义。

这是我来自block.js的代码

const { __ } = wp.i18n; // Import __() from wp.i18n
const {  AlignmentToolbar,
        BlockControls,
        registerBlockType } = wp.blocks; 
const { RichText } = wp.editor;
const { Autocomplete, } =wp.components;


const MyAutocomplete = () => {
    const autocompleters = [
        {
            name: 'fruit',   
            triggerPrefix: '@',   
            options: [
                {  name: 'Apple', id: 1 },
                {  name: 'Orange', id: 2 },
                {  name: 'Grapes', id: 3 },
                {  name: 'test', id: 4 },
            ],

            getOptionLabel: option => (
                <span>
                  { option.name }
                </span>
            ),

            getOptionKeywords: option => [ option.name ],

            isOptionDisabled: option => option.name === 'Grapes',

            getOptionCompletion: option => (
                <abbr title={ option.name }>{ option.name }</abbr>
            ),
        }
    ];

    function onChangeAuto(newContent){
        console.log('autocompletexx '+newContent);
    }

    function onSelectAuto(event){
        console.log(event.target);
           console.log( event.target.value);
    }

    return (
        <div>
            <Autocomplete completers={ autocompleters }>
                { ( { isExpanded, listBoxId, activeId } ) => (
                    <div
                        contentEditable
                        suppressContentEditableWarning
                        aria-autocomplete="list"
                        aria-expanded={ isExpanded }
                        aria-owns={ listBoxId }
                        aria-activedescendant={ activeId }
                        onChange={onChangeAuto }
                        onSelect={onSelectAuto}

                    >
                    </div>
                ) }
            </Autocomplete>
            <p class="autocomplete_p">Type @ for triggering the autocomplete.</p>
        </div>
    );
};




registerBlockType( 'residence-gutenberg-block/membership-package-settings', {
    title: __( 'Residence - Membership Package Settings' ), // Block title.
    icon: 'shield', 
    category: 'common', 
    keywords: [
        __( 'membership-package-settings' ),
    ],
        attributes:{
            package_id:{
                type:'string',
                select:'p'
            },
            package_name:{
                type:'string',
            },
        },


    edit: function( props ) {

                const { attributes: {package_name}, className,setAttributes,isSelected } = props;               
        return (
            <div className={ props.className }>
                            <form>
                                <label className="wpresidence_editor_label">Current Package: {package_name}</label>
                                <MyAutocomplete></MyAutocomplete>
                             </form>

            </div>

        );
    },

    save: function( props ) {
              // Rendering in PHP
                return null;

    },
} );

Answer 1

将onChange，onSelect向下传递到div元素将不起作用，因为这些属性仅适用于表单字段元素（例如input, select等）。 ）。

我检查了文档和源代码，没有找到处理此案的任何详细信息或官方方法。

但是，我看到两种获取所选值的可能方法：

1。使用自动完成onReplace属性

在查看Autocomplete's source code时，我注意到onSelect回调以选定的选项作为数组调用onReplace prop。它可能不适合所有情况，但您可以尝试一下！这可能足以满足您的情况！您可以尝试将处理程序添加到onReplace中，如下所示：

<Autocomplete
  onReplace={ option => { console.log(option) } }
  completers={ autocompleters }>
  { ( { isExpanded, listBoxId, activeId } ) => (
    <div
      contentEditable
      suppressContentEditableWarning
      aria-autocomplete="list"
      aria-expanded={ isExpanded }
      aria-owns={ listBoxId }
      aria-activedescendant={ activeId }
    />
  ) }
</Autocomplete>

2。手动监听<div />的更改

您可以将onInput，onBlur侦听器添加到<div />，使其具有不受控制的react div组件，并且当div的值更改时，我们可以将更改后的值保留在父组件的州。

这里有个很棒的讨论，描述了这些技术：React.js: onChange event for contentEditable

好的想法是，已经有一个插件（基于此讨论）可以为您完成此操作：react-contenteditable。

首先，您必须将<MyAutocomplete />组件转换为全状态（不起作用），然后：

import ContentEditable from 'react-contenteditable'

// Boilerplate ...

<Autocomplete completers={ autocompleters }>
  { ( { isExpanded, listBoxId, activeId } ) => (
    <ContentEditable
      html={this.state.html}
      onChange={this.handleChange}
      contentEditable
      suppressContentEditableWarning
      aria-autocomplete="list"
      aria-expanded={ isExpanded }
      aria-owns={ listBoxId }
      aria-activedescendant={ activeId }
    />
  ) }
</Autocomplete>

结论

令我惊讶的是，在Autocomplete's documentation中没有关于此案例的任何详细信息。我想这是由于以下声明（27.08.2018）：

  

Gutenberg正在GitHub上开发，您可以尝试早期Beta   插件存储库中的最新版本。请记住，这不是   功能齐全，功能完善或已投入生产。

但是，上述两种方法中的一种将为您提供帮助，直到它们提供了与组件一起使用的完整API。

我建议您继续用自己的组件包装Wordpress的<Autocomplete />-以在以后发布完整的API时轻松地重构代码。

如有疑问，请在下面发表评论。