如何在 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' : ''`); }} />