Ant-design: FormItemは内部の制御入力を検出しません

作成日 2017年03月28日 · 8コメント · ソース: ant-design/ant-design

環境

antdバージョン：2.7.4
OSとそのバージョン：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.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日

こんにちは@gaastonsr。私たちはあなたの提案/フィードバックがとても気に入っています。プルリクエストを

こんにちは@gaastonsr、私たちはあなたの提案/フィードバックに完全に同意します、この問題を解決するためにプルリクエストを事前設定されたテンプレートを入力し、変更に必要な対応する変更ログ、TypeScript定義、テストケース、ドキュメントなどを提供してください。、そしてCIが合格することを確実にするために、私たちはできるだけ早くレビューします、事前に感謝し、あなたの貢献を楽しみにしています！

giphy

ant-design-bot 2019年08月28日

antd v4の新しいフォームコンポーネントを確認してください。v3フォームは短時間で維持されません。

afc163 2020年03月13日

このページは役に立ちましたか？

0 / 5 - 0 評価