Question

在PHP中注册了meta字段之后，在JS中注册了块类型，设置了它的属性，一切正常！！！ ---除非我单击并在两个输入字段之间键入。

当用户填写第一个字段（my_first_name），然后单击进入下一个字段（my_last_name）并开始输入内容时，React会将第一个字段的值恢复为原始值。当我单击回第一个字段并键入，将第二个字段恢复为原始值时，也会发生同样的事情。

如果我填写my_first_name，请点击保存，它将正确保存。然后，我可以进入my_last_name，填写它，点击保存，一切都将正确保存。在保存之前，我无法同时输入和编辑两者。

我是否缺少或误解了有关如何处理多个自定义字段以及props.setAttributes（）如何工作的基础知识？

PHP

function register_directory_meta() {
$fields = array(
   'name_first_name',
   'name_last_name',
);

foreach ($fields as $field) {
   register_post_meta('people', $field, array(
      'auth_callback' => '__return_true',
      'type'          => 'string',
      'single'        => true,
      'show_in_rest'  => true,
   ));
}
}
add_action('init', 'register_directory_meta');

JS

import { registerBlockType } from '@wordpress/blocks';
import { TextControl } from '@wordpress/components';

registerBlockType('my-directory/name-controls', {
   title: 'Name Fields',
   category: 'my-directory',
   attributes: {
      my_first_name:{
         type: 'string',
         source: 'meta',
         meta: 'name_first_name',
      },
      my_last_name: {
         type: 'string',
         source: 'meta',
         meta: 'name_last_name',
      },
   },
   edit: (props) => {
      function updateName(value, attribute) {
         props.setAttributes({
            [attribute]: value,
         });
      }
      return (
         <div id="metatest">
            <TextControl
               onChange={value => updateName(value, 'my_first_name')}
               label="First Name"
               key="firstName"
               value={props.attributes.my_first_name}
            />
            <TextControl
               onChange={value => updateName(value, 'my_last_name')}
               label="Last Name"
               key="lastName"
               value={props.attributes.my_last_name}
            />
         </div>
       );
   },
   save: function (props) {
      return null;
   }
})

SetAttributes，onChange和post meta

0 个答案: