Question

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

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

但问题是React尚未识别setCustomValidity。

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

Answer 2

反应不支持

setCustomValidity。您可以尝试使用dangerouslySetInnerHTML来实现您想要的效果。

Answer 3

受阿米德答案的启发，我实现了简单的功能，可以轻松地将其用作输入组件（只记得导入react-dom库；））：

const setCustomValidityForInputText = (inputText, errorMessage) => {
      if (inputText instanceof InputText) {
        const htmlInput = ReactDOM.findDOMNode(inputText).querySelector('input');
        htmlInput.setAttribute('oninvalid', `this.setCustomValidity('${errorMessage}')`);
        htmlInput.setAttribute('oninput', "this.setCustomValidity('')");
      }
    };

以及在JSX中使用somwehere的示例（InputText是标准html输入字段的扩展）：

<InputText ref={(component) => setCustomValidityForInputText(component, 'Your error message goes here!')}/>

Answer 4

如果可能，我建议利用 onChange 处理程序并在 event.target 上设置自定义有效性。在我看来，这是最干净的解决方案。

const Component = ({value, pattern, misMatchEmail, onChange}) => {
  
  const handleInputChange = (event) => {
    event.target.setCustomValidity(misMatchEmail ? 'Custom message' ? '');

    onChange(event);
  }
  
  return (
    <input value={value} pattern={pattern} onChange={handleInputChange} />
  )
}

仅作记录。在 Refs 和功能组件的情况下，我们可以使用 useRef 钩子如下。也可以利用 onChange 与 onInvalid 处理程序的组合来代替 onKeyUp 处理程序。

const Component = ({value, pattern, misMatchEmail, onChange}) => {
   const inputRef = React.useRef(null)

   const handleInputChange = (event) => {
     inputRef.current.setCustomValidity(misMatchEmail ? 'Custom message' ? '');

     onChange(event);
   }   
     
      
   return (
      <input ref={inputRef} value={value} pattern={pattern} onChange={handleInputChange} />
   )
}

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

4 个答案: