formsy-semantic-ui-react输入验证不能正常工作

npm install formsy-react formsy-semantic-ui-react semantic-ui-react semantic-ui-css

import React from 'react';
import { Form, Input } from 'semantic-ui-react';
import Formsy from 'formsy-react';
import 'semantic-ui-css/semantic.min.css';

<Formsy.Form>
  <Formsy.Form.Field>
    <label>Email</label>
    <Input name="email" placeholder="Email" validations="isEmail" required />
  </Formsy.Form.Field>
  <button type="submit">Submit</button>
</Formsy.Form>

<Formsy.Form onValidSubmit={this.handleValidSubmit} onInvalidSubmit={this.handleInvalidSubmit}>
  {/* 表单字段 */}
</Formsy.Form>

handleValidSubmit = (data) => {
  console.log('Form submitted with data:', data);
}

handleInvalidSubmit = (data, resetValues, invalidate, validateAll) => {
  console.log('Form has errors');
}

import React from 'react';
import { Form, Input, Button } from 'semantic-ui-react';
import Formsy from 'formsy-react';
import 'semantic-ui-css/semantic.min.css';

class ValidatedForm extends React.Component {
  handleValidSubmit = (data) => {
    console.log('Form submitted with data:', data);
  }

  handleInvalidSubmit = (data, resetValues, invalidate, validateAll) => {
    console.log('Form has errors');
  }

  render() {
    return (
      <Formsy.Form onValidSubmit={this.handleValidSubmit} onInvalidSubmit={this.handleInvalidSubmit}>
        <Formsy.Form.Field>
          <label>Email</label>
          <Input name="email" placeholder="Email" validations="isEmail" required />
        </Formsy.Form.Field>
        <Formsy.Form.Field>
          <label>Password</label>
          <Input type="password" name="password" placeholder="Password" validations="minLength:6" required />
        </Formsy.Form.Field>
        <Button type="submit">Submit</Button>
      </Formsy.Form>
    );
  }
}

export default ValidatedForm;