ReactアプリケーションでsetCustomValidity（）が機能しないのはなぜですか？

Question

なぜsetCustomValidity()が反応しないのですか？何か不足していますか？バニリアHTMLとJSはうまく動作します。あるいは、簡単に何かを作る他の方法はsetCustomValidityに似ていますか？

は、コードに反応：

なしで

class Form extends React.Component { 
    formVal(e) { 
    e.target.setCustomValidity("Test_1"); 
    } 
    formVal2() { 
    let inpt = document.getElementById("input"); 
    inpt.target.setCustomValidity("TEST_2"); 
    } 
    render() { 
    return (
     <div> 
     <form> 
      <input 
      id="input" 
      type="datetime-local" 
      onBlur={this.formVal} 
      /> 
     </form> 
     <button onClick={this.formVal2}>Click </button> 
     </div> 
    ); 
    } 
} 

CodePen - React

が反応：

<form> 
    <input type="email" id="mail" name="mail"> 
    <button onclick="test()">Submit</button> 
</form> 

// JS

​​

CodePen - no React

Answer 1

setCustomValidityすぐに検証をトリガするわけではありません。トリガーするフォーム送信イベントが必要です。checkValidityを呼び出す必要があります。私はあなたのCodePenをReactでどのように達成できるかを示すために更新しました。また以下にも含まれています。

class Form extends React.Component { 
 
    
 
    onChange(e) { 
 
    let date = new Date(Date.parse(e.target.value)); 
 
    
 
    if (date > new Date()) { 
 
     e.target.setCustomValidity("Please select a date in the past."); 
 
    } else { 
 
     e.target.setCustomValidity(""); 
 
    } 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     <form> 
 
      <input 
 
      id="input" 
 
      type="datetime-local" 
 
      onChange={this.onChange} 
 
      /> 
 
      <button type="submit">Submit</button> 
 
     </form> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Form />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>