README

关于它

此插件是一个小型React应用程序，与Wordpress全局存储进行交互。它将一个自定义React钩子暴露在window对象的24hrchecklist属性上，以处理状态并轻松地与其保持同步。

将来，我计划创建一个npm包，因为从window获取它并不最优化，因为你必须考虑到脚本的加载方式。

下载

您可以从这里下载插件 这里。

安装

将zip文件解压到您的WordPress插件文件夹中，就像其他插件一样，然后激活它。

如何使用

好的，让我们开始吧。您想要渲染一个具有输入字段的组件，您想在清单中显示其有效状态。那么我们怎么做呢？

开始之前

一个重要的第一步是确保清单脚本在我们的组件加载 之前。为此，您必须在您的块插件中添加 24hr_checklist_script 到 wp_register_script 函数的依赖中。

示例

wp_register_script(
    'components-resurs-block-js',
    plugins_url( '/dist/blocks.build.js', dirname( __FILE__ ) ),
    array( '24hr_checklist_script', 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), // <-- Important!
    null,
    true // Enqueue the script in the footer.
);

现在我们可以确信清单脚本在加载我们的块/块之前。

使用钩子

该插件在window对象上暴露了一个名为_24hrchecklist_的属性，这是整个存储实例，并附加了一些不同的方法。我们想使用 useChecklist 函数，因为这是我们想要的钩子。

useChecklist钩子接受以下参数

const [value, setValue] = useChecklist(label: string, defaultValue: any, options: {
    validator?: function(field: object): boolean,
    description?: string,
    descriptionOnInvalid?: boolean,
    useInitialValue?: boolean, // Whether to treat the initialValue as a reference and watch it for changes. Defaults to false.
})

自定义验证器选项是一个回调，它接收字段对象。

// Field object
{
    id: string,
    value: any,
    valid: boolean,
    name: string,
    description?: any, // React elements can be passed!
    descriptionOnInvalid?: boolean
}

示例

const { useChecklist } = window._24hrchecklist_; // If this fails, make sure you've added the script as dependency

// This will make name required to not be empty.
const [name, setName] = useChecklist('Name', '');

// Only valid if age is more than 18
const [age, setAge] = useChecklist('Age', 'Enter your age...', {
    validator: field => parseInt(field.value) > 18,
});

// You can also pass it a description. This will show a tooltip next to the item in the checklist.
const [age, setAge] = useChecklist('Age', '', {
    validator: field => parseInt(field.value) >= 18,
    description: <p>You'll need to be 18 or more for this to work.</p>,
    // If you only want to display the description if the field is invalid. Defaults to false:
    descriptionOnInvalid: true,
});

// If you set data in your attributes and want to keep the required status in sync with that value
// you can pass it as a reference with the useInitialValue option set to true.
// With this you don't have to call the set function whenever the value of the initialValue changes. You can of course do it if you want to.
const [age] = useChecklist('Age', props.attributes.age, {
    validator: field => parseInt(field.value) >= 18,
    description: <p>You'll need to be 18 or more for this to work.</p>,
    useInitialValue: true,
});

// Use the age
<input value={age.value} onChange={e => setAge(e.target.value)} />;

// Use the age as an attribute
<input value={age.value} onChange={e => props.setAttributes({ age: e.target.value })} />;

很好，但是清单在哪里呢？

您可以在右侧的文档菜单中找到清单。

当字段无效时，它具有红色背景，并且禁用保存按钮。当它有效时，它看起来像这样：