Mobx React表单-如何实现自定义onSubmit

import React, { Component } from 'react';
import { observable, computed } from 'mobx';
import { observer } from 'mobx-react';

@observer
class MyForm extends Component {
  @observable
  formData = {
    username: '',
    password: '',
  };

  @computed
  get isValid() {
    // 表单验证逻辑，根据需求自行编写
    return this.formData.username !== '' && this.formData.password !== '';
  }

  handleSubmit = (e) => {
    e.preventDefault();
    if (this.isValid) {
      // 表单提交逻辑，根据需求自行编写
      console.log('Form submitted:', this.formData);
    }
  };

  handleChange = (e) => {
    const { name, value } = e.target;
    this.formData[name] = value;
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Username:
          <input
            type="text"
            name="username"
            value={this.formData.username}
            onChange={this.handleChange}
          />
        </label>
        <br />
        <label>
          Password:
          <input
            type="password"
            name="password"
            value={this.formData.password}
            onChange={this.handleChange}
          />
        </label>
        <br />
        <button type="submit" disabled={!this.isValid}>
          Submit
        </button>
      </form>
    );
  }
}

export default MyForm;