antd父组件获取子组件form表单中指定输入框的值

有时候我们开发的时候需要在父组件中拿到单独子组件表单中指定的一个输入框来的值,但是又不想经过校验,所有我们可以通过给父组件中加一条属性wrappedComponentRef

子组件代码

<Form onSubmit={submit} >
            <Form.Item>
              {getFieldDecorator('username', {
                rules: [
                  this.getPageType(type).rule
                ]
              })(
                <Input
                 prefix={<Icon type={this.getPageType(type).icon1} style={{ color: '#696969' }} />}
                 />
              )}
            </Form.Item>
            
            <button  onClick={this.props.getUsernameValue}>获取username输入框的值</button>

            <Button type="primary" block htmlType="submit" className="login-form-button">
               提交
           </Button>
          </Form>

父组件代码

render(){
    return(
        <div className={styles.loginContent}>
          <Content
            wrappedComponentRef={ref=>{this.getForm=ref}}  //用户获取指定的值
            ref='getFormVlaue'  //用于提交表单,通过ref来获取整个表单
            submit ={(e)=>{this.handleSubmit(e)}}
            getUsernameValue={(e)=>{this.sendYzm(e)}}
          />
        </div>
    )
  }
  //获取单个值的点击事件,不会验证子组件的表单
sendYzm=(e)=>{
    e.preventDefault(e);
    const form = this.getForm.props.form;
    console.log(form.getFieldValue('username'))  //获取指定的值
  }
  
//提交表单,验证整个子组件的表单

handleSubmit = (e) => {
    e.preventDefault();
    const form = this.refs.getFormVlaue;
    form.validateFields((err, values) => {
      if (!err) {
        console.log(values)
      }
    });
  }