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 컨텍스트를 정의하는 것이며 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일

안녕하세요 @gaastonsr. 귀하의 제안 / 피드백이 마음에 들었습니다. Pull Request 를

안녕하세요 @gaastonsr, 우리는 귀하의 제안 / 피드백에 전적으로 동의합니다.이 문제를 해결하기 위해 Pull Request 를 십시오 . Pull Request를 올바른 브랜치 (기능 브랜치의 새 기능, 다른 기능은 마스터 브랜치)로 보내 주시고 , Pull Request

giphy

ant-design-bot 에 2019년 08월 28일

antd v4에서 새로운 양식 구성 요소를 확인하십시오. v3 양식은 단시간에 유지되지 않습니다.

afc163 에 2020년 03월 13일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급