Ant-design: FormItem未检测到内部的控件输入

创建于 2017-03-28 · 8评论 · 资料来源: ant-design/ant-design

环境

蚂蚁版本：2.7.4
操作系统及其版本：OS X 10.12.3
浏览器及其版本：Chrome 56

你做了什么？请提供步骤以重现您的问题。

我们将表单字段包装到包含其验证逻辑的其自己的组件中。例

UsernameInput.js

class UsernameInput extends Component {
  render() {
    return this.props.form.getFieldDecorator(this.props.id, {
      rules: [...]
    })(InputComponent);
  }
}

我们想以这样的形式使用它们

// imports here

class CustomForm {
  render() {
    return (<Form>
      <Form.Item>
        <UsernameInput form={this.props.form} />
      </Form.Item>
    </Form>);
  }
}

export default Form.create()(CustomForm);

这不起作用，因为FormItem.getControls不会将组件检测为控件。只是将包装视为UsernameInput。

您期望什么？

FormItem来检测UsernameInput并用作任何输入控件。显示错误消息，反馈，帮助等。

发生什么事？

FormItem在内部找不到控件。

Inactive IssueHuntFest help wanted 🗣 Discussion

资料来源

gaastonsr

最有用的评论

我们通过将组件作为函数来解决

CustomForm.js

// imports here

class CustomForm {
  render() {
    return (<Form>
      <Form.Item>
        {UsernameInput({ form: this.props.form })}
      </Form.Item>
    </Form>);
  }
}

export default Form.create()(CustomForm);

但是，如果您愿意接受想法，我认为可能的解决方案是在FormItem定义上下文，并且Input可以在存在时注册自己。例

FormItem.js

class FormItem extends Component {
  static childContextTypes = {
    registerControl: PropTypes.func
  };

  getChildContext() {
    return { registerControl: this.registerControl }; 
  }

  registerControl(control) {
    this.controls.push(control);
  }
}

Input.js

class Input extends Component {
  static contextTypes = {
    registerControl: PropTypes.func
  };

  componentDidMount() {
    if (this.context.registerControl) {
      this.registerControl(this);
    }
  }
}

gaastonsr 于 2017-03-30

👍4

所有8条评论

解决这个问题很困难。您是否可以在此处发布您的建议（如何实施）？

benjycui 于 2017-03-29

我们通过将组件作为函数来解决

CustomForm.js

// imports here

class CustomForm {
  render() {
    return (<Form>
      <Form.Item>
        {UsernameInput({ form: this.props.form })}
      </Form.Item>
    </Form>);
  }
}

export default Form.create()(CustomForm);

但是，如果您愿意接受想法，我认为可能的解决方案是在FormItem定义上下文，并且Input可以在存在时注册自己。例

FormItem.js

class FormItem extends Component {
  static childContextTypes = {
    registerControl: PropTypes.func
  };

  getChildContext() {
    return { registerControl: this.registerControl }; 
  }

  registerControl(control) {
    this.controls.push(control);
  }
}

Input.js

class Input extends Component {
  static contextTypes = {
    registerControl: PropTypes.func
  };

  componentDidMount() {
    if (this.context.registerControl) {
      this.registerControl(this);
    }
  }
}

gaastonsr 于 2017-03-30

👍4

我将尝试找到解决方案。

benjycui 于 2017-03-30

@gaastonsr您可以通过这种解决方法显示有关UsernameInput的完整代码吗？

sbyps 于 2017-11-24

@gaastonsr您的解决方案对我有很大帮助！

这仍然是有效的问题吗？上下文建议对我来说听起来不错。

tomasfrancisco 于 2018-08-02

👍1

今天就在[email protected]。上遇到这个@gaastonsr的功能解决方法比要求所有表单组件检查上下文更优雅。

JonDum 于 2018-10-14

Hello @gaastonsr. We totally like your proposal/feedback, welcome to send us Pull Request for it. Please send your Pull Request to proper branch (feature branch for new feature, master for bugfix and other changes), fill the [Pull Request Template] here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. Appreciate it advance and we are looking forword to your contribution!

你好 @gaastonsr, 我们完全同意你的提议/反馈，欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献！

giphy

ant-design-bot 于 2019-08-28

请检查antd v4中的新表单组件，v3表单将不会在短期内维护。

afc163 于 2020-03-13

此页面是否有帮助？

0 / 5 - 0 等级