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

我从顶层组件传递了一个状态标志。如果标志为真，则应设置自定义有效性，否则应清除自定义有效性。我得到这个错误：如何在React组件上设置自定义有效性？

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;

您能否给我一些建议，我该如何解决这个问题？

来源

2017-07-31 Negin Basiri

首先你的？内部es6模板文字（''）被视为字符串它不工作，如果如果其他使用它像这样 setCustomValidity = {misMatchEmail？ '确认电子邮件不符'：''} –

作为一种可能的解决方法，您可以使用ref以及直接使用纯javascript/jquery的属性的相应处理程序集值。事情是这样的：

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

来源

2017-07-31 06:30:25 Amid

为了达到这个目的，我是否必须将功能组件更改为类组件？ –

不 - 你应该没问题。看看这里：https://facebook.github.io/react/docs/refs-and-the-dom.html#refs-and-functional-components – Amid

我得到这个错误无法读取属性'setAttribute'的null –

setCustomValidity不被支持的反应。你可以尝试使用dangerouslySetInnerHTML来实现你想要的。

来源

2017-07-31 06:46:03

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

回答

相关问题