html - 如何在 React 组件上设置自定义有效性？

Question

我从顶级组件传递了一个状态标志。如果该标志为真，则应设置自定义有效性，否则应清除自定义有效性。我收到此错误:

Unknown prop `setCustomValidity` on <input> tag. Remove this prop from the element. 

但是问题是 setCustomValidity 还没有被 React 识别。

import React from "react";
import BaseField from "./BaseField";
import PropTypes from "prop-types";

const InputField = props => {
const { name, type, isMandatory, onChange, pattern, misMatchEmail } = props;

return (
    <BaseField {...props}>
    <input
        name={name}
        pattern={pattern}
        type={type}
        onChange={onChange}
        setCustomValidity={`${misMatchEmail} ? 'Confirm email does not match' : ''`}
        onSelect={e => e.preventDefault()}
        onCopy={e => e.preventDefault()}
        onPaste={e => e.preventDefault()}
        onCut={e => e.preventDefault()}
        required={isMandatory}
    />
    </BaseField>
);
};

InputField.propTypes = {
name: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
isMandatory: PropTypes.bool.isRequired,
misMatchEmail: PropTypes.bool,
pattern: PropTypes.string
};

export default InputField;

请问我该如何解决这个问题？

Answer 1

作为一种可能的解决方法，您可以使用 ref并在相应的处理程序中直接使用纯 javascript/jquery 设置属性的值。像这样:

<input
   type="text"
   ref={(c) => { c.setAttribute("setCustomValidity", `${misMatchEmail} ? 'Confirm email does not match' : ''`); }} />