oninvalid 属性不在 React js 中呈现

Question

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

 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：

export default function App() {
  return (
    <form>
      Name:{" "}
      <input
        type="text"
        onInvalid={() => console.log("working!")}
        name="fname"
        required
      />
      <input type="submit" value="Submit" />
    </form>
  );
}

Answer 2

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

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

Answer 3

如果您将 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('')}

oninvalid 属性不在 React js 中呈现

oninvalid attribute not rendering in React js

html5-validation

reactjs