oninvalid 属性未在 React js 中呈现

Question

我正在尝试oninvalid在 React js 代码下的 HTML 元素中添加属性。（使用非基于类的反应钩子）

 const openEndedAnswer = answer => {
        return (<>
            <input type="text" className="form-control"
                required="required"
                oninvalid="this.setCustomValidity('Enter User Name Here')"
                oninput="this.setCustomValidity('')"
                maxLength="255"
                id={`answer_${question.id}`}
                name={`answer_${question.id}`}
                onChange={e => updatePostForm(e)}
                pattern=".*[^ ].*"
                title=" No white spaces"
            />
        </>)
    }

但它永远不会在浏览器中呈现。所有其他属性都可以在 F12 源视图中看到。

Answer 1

属性名称应该onInvalid代替oninvalid和onInput。oninput此外，您需要setCustomValidity在输入字段上调用函数，如下所示（因为输入字段是事件的目标）：

onInvalid={e => e.target.setCustomValidity('Enter User Name Here')}
onInput={e => e.target.setCustomValidity('')}

Answer 2

如果你使用 React 和 javascript，这应该可以工作：

onInvalid={e => e.target.setCustomValidity('Your custom message')}
onInput={e => e.target.setCustomValidity('')}

但如果你使用 React 和 typescript，你还需要添加以下内容：

onInvalid={e => (e.target as HTMLInputElement).setCustomValidity('Enter User Name Here')}
onInput={e => (e.target as HTMLInputElement).setCustomValidity('')}