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

可能な回避策の1つとして、refを使用し、その属性の対応するハンドラ設定値に、純粋なjavascript/jqueryを直接使用することができます。このような 何か：

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

Answer 2

setCustomValidityは反応によってサポートされていません。代わりに、dangerouslySetInnerHTMLを使用して、あなたが望むものを達成しようとすることができます。