Question

我正在尝试通过自定义验证来创建antd表单。

该代码可用here

问题在于

1）我在该字段下没有得到反馈。

2）我无法提交表格。

任何帮助将不胜感激。谢谢！

Answer 1

由于您的模式包装了Form，因此需要使用wrappedComponentRef。

class CustomizedForm extends React.Component { ... }

// use wrappedComponentRef
const EnhancedForm =  Form.create()(CustomizedForm);
<EnhancedForm wrappedComponentRef={(form) => this.form = form} />
this.form // => The instance of CustomizedForm

使用Modal包装表单来检查下一个沙箱。

class CollectionsPage extends React.Component {
  state = {
    visible: false,
  };

  showModal = () => {
    this.setState({ visible: true });
  };

  handleCancel = () => {
    this.setState({ visible: false });
  };

  handleCreate = () => {
    const { form } = this.formRef.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }

      console.log('Received values of form: ', values);
      form.resetFields();
      this.setState({ visible: false });
    });
  };

  saveFormRef = formRef => {
    this.formRef = formRef;
  };

  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          New Collection
        </Button>
        <CollectionCreateForm
          wrappedComponentRef={this.saveFormRef}
          visible={this.state.visible}
          onCancel={this.handleCancel}
          onCreate={this.handleCreate}
        />
      </div>
    );
  }
}

Answer 2

我已解决此问题。错误是我没有在验证器的try块中调用回调

turbinesValidator = (rule, value, callback) => {
    try {
        let output = Number(value)

        if ((output < 1) || (output > 40) || (!Number.isInteger(output))) {
          throw new Error('Turbines must be an integer between 1 to 40.');
        }

        callback() // << ---this 
    }

    catch (err) {
      callback(err);
    }
  }

Antd表单自定义验证器

2 个答案: