如何让 validator.js 在 React 中工作？

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 语句之前即可。

如何让 validator.js 在 React 中工作？

How do I get validator.js to work in react?

javascript

reactjs

validator.js

wordpress-gutenberg

gutenberg-blocks