如何在反应中向复选框添加必需的属性？

Question

我在input type="checkbox"中添加了属性required

   return (
     <form onSubmit={handleSubmit} action="/questions" method="post">
       <div>
         <label name="agreed">
           <input type="checkbox" required name="agreed" />
             I agree
         </label>
       </div>
     </form>
   );

但是当你点击提交表单按钮时会出现错误

An invalid form control with name='agreed' is not focusable.

我希望看到标准浏览器警告。是真的吗？

Answer 1

这很好用

import React, { Component } from "react";

class App extends Component {
  state = {};
  handleSubmit = e => {
    console.log("Trying to submit");
    e.preventDefault();
  };
  render() {
    return (
      <form onSubmit={this.handleSubmit} action="/questions" method="post">
        <div>
          <label htmlFor="agreed">Accept </label>
          <input type="checkbox" required name="agreed" />I agree
        </div>
        <div>
          <button type="submit">Submit</button>
        </div>
      </form>
    );
  }
}

export default App;