Question

我正在使用React创建一个带有一个数字类型输入的表单。另外，使用checkValidity检查表单在提交时是否有效

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = {
    query: "",
    formValidity: true
  };

  handleSubmit = (event, prefix) => {
    event.preventDefault();
    this.setState(
      {
        formValidity: this.formEl.checkValidity()
      },
      () => {
        console.log("Form is ", this.state.formValidity);
        alert("Form Validity " + this.formEl.checkValidity());
      }
    );
  };

  handleTextChange = event => {
    let query = event.target.value;
    this.setState({
      query
    });
  };

  handleKeyUp = event => {
    const { key } = event;
    if (key === "Enter") {
      this.handleSubmit(event);
    }
  };

  render() {
    return (
      <form
        onSubmit={this.handleSubmit}
        ref={node => {
          this.formEl = node;
        }}
      >
        <input
          type="number"
          value={this.state.query}
          onChange={this.handleTextChange}
          onKeyUp={this.handleKeyUp}
        />

        <button type="submit">submit</button>

        <br />
        <span>Form Validity: {JSON.stringify(this.state.formValidity)}</span>
      </form>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

当我使用Enter键时，提交表单：

33有效
33.33无效

当我使用按钮时，单击以提交表单：

33有效
33.33也是有效的

该场景的实时演示是here。有人可以帮忙吗？

使用checkFormValidity的表单有效性

0 个答案: