如何让 validator.js 做出反应？

Question

我对反应还很陌生。我有一个要求电子邮件验证的问题，我找到了一个名为 validator.js 的 npm 包来处理这个问题。所以我构建了一个包含电子邮件地址的自定义 Gutenberg WordPress 块。我必须在验证器中调用的代码似乎使块停止渲染。代码如下：

import { __ } from '@wordpress/i18n';
import { SimpleText, TextFormats } from '../../components/SimpleText';
import validator from 'validator';

/**
 * @typedef {Object} ContactAttrs
 * @property {'full'} align
 * @property {string} contactName
 * @property {string} contactInfo
 */

/**
 * @param {import('@wordpress/blocks').BlockEditProps<ContactAttrs>} props
 */

const isValidEmail = validator.isEmail( contactInfo );

export function ContactEdit( { className, attributes, setAttributes } ) {
    return (
        <div className={ className }>
            <div className="block-align__wrapper">
                <SimpleText
                    identifier="contactName"
                    tagName="h5"
                    value={ attributes.contactName }
                    onChange={ ( contactName ) => setAttributes( { contactName } ) }
                    placeholder={ __( 'Enter contact name' ) }
                />
                <SimpleText
                    identifier="contactInfo"
                    tagname="a"
                    value={ attributes.contactInfo }
                    allowedFormats={ TextFormats.LINK }
                    onChange={ ( contactInfo ) => setAttributes( { contactInfo } ) }
                    placeholder={ __( 'Enter email address' ) }
                />
                { isValidEmail ? <div className="error">invalid email</div> : null }
            </div>
        </div>
    );
}

当我删除了 validatoir.js 的东西时，这个块就起作用了。有什么遗漏吗？

Answer 1

我认为这是因为contactInfo 没有在范围内定义。我认为应该是attributes.contactInfo。此外，您需要将const isValidEmail = validator.isEmail( contactInfo ); 移动到ContactEdit 中，只需将其放在return 语句之前即可。