我想开发一个自定义块，让用户从自动完成中选择一些信息。我设法在编辑功能上创建自动完成组件。
用户可以选择一个项目，但我不知道如何处理属性保存。
我正在尝试将所选项目另存为属性package_name。我在自动完成组件上创建了onChange函数，但event.target.value未定义。
这是我来自块的代码.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;
},
} );
传递onChange，onSelect到div元素将不起作用，因为这些属性仅适用于表单字段元素(如input, select等(。
我检查了文档和源代码，没有找到任何处理此案的细节或官方方法。
但是，我看到了获取所选值的两种可能方法：
1. 使用自动完成onReplace道具
查看自动完成的源代码，我注意到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 />，有一个不受控制的 reactdiv 组件，当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>
结论
我很惊讶在自动完成的文档中没有这种情况的任何详细信息。我想这是因为以下声明(27.08.2018(：
Gutenberg 正在 GitHub 上开发，您可以尝试早期测试版 今天从插件存储库发布版本。虽然请记住它不是 功能齐全、功能齐全或生产就绪。
但是，上面提到的两种方法之一将为您提供帮助，直到它们提供完整的 API 来处理其组件。
我建议你继续用你自己的组件包装Wordpress的<Autocomplete />- 以便以后当他们发布完整的API时轻松地重构你的代码。
如果您有任何疑问，请随时在下面发表评论。