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

我从最上面的组件传下了一面州旗。如果标志为true，则应设置自定义有效性，否则应清除自定义有效性。我得到这个错误：

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

然而，问题是，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;

---

您能告诉我如何解决这个问题吗？

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

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

---

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

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

---

受Amid答案的启发，我实现了一个简单的函数，可以轻松地用于输入组件，请记住导入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 InputText中使用somwehere的示例是标准html输入字段的扩展：

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

---

受Amid答案的启发，我实现了一个简单的函数，可以轻松地用于输入组件，请记住导入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 InputText中使用somwehere的示例是标准html输入字段的扩展：

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

---

我建议尽可能利用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} />
  )
}

---

我建议尽可能利用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} />
  )
}

---

我必须将功能组件更改为类组件吗？不，你应该没事。请看这里：我得到这个错误，无法读取的属性“setAttribute”null@NeginBasiri如果ref回调被定义为一个内联函数，那么它将在更新期间被调用两次，首先是null，然后是DOM元素。这是因为每次渲染都会创建一个新的函数实例，因此React需要清除旧的ref并设置新的ref。您可以通过将ref回调定义为类上的绑定方法来避免这种情况。为此，我必须将函数组件更改为类组件吗？不，您应该可以。请看这里：我得到这个错误，无法读取的属性“setAttribute”null@NeginBasiri如果ref回调被定义为一个内联函数，那么它将在更新期间被调用两次，首先是null，然后是DOM元素。这是因为每次渲染都会创建一个新的函数实例，因此React需要清除旧的ref并设置新的ref。首先，您可以通过将ref回调定义为类上的绑定方法来避免这种情况？在es6模板文本中，``被视为字符串，它不起作用，就好像其他人使用它一样setCustomValidity={mismatchMail？'Confirm email not match'：}首先？在es6模板文本中，``被视为字符串，它不工作，就好像其他人使用它一样setCustomValidity={mismatchMail？'Confirm email not match'：}