首页 > ant design的Form组件怎么设置ref值?

ant design的Form组件怎么设置ref值?

<Form horizontal onSubmit={this.handleSubmit}>
             <FormItem
               {...formItemLayout}
               label="用户名:"
             >
               <Input type="text" {...getFieldProps('email', { ref: 'email' })} placeholder="请输入邮箱" />
             </FormItem>
             <FormItem
               {...formItemLayout}
               label="密码:"
             >
               <Input type="password" {...getFieldProps('pass', { ref: 'pass' })} placeholder="请输入密码" />
             </FormItem>
            <Button type="primary" htmlType="submit" >登录</Button>
      </Form>

试了很多写法,好像都没有用啊!!!!!


Ant 中不需要为 Form 组件设置 ref 。如上面的代码,只需要把 FormItem 包裹在 Form 中就行了,输入框里面用 getFieldProps 设置值。

重点在于需要在组件的外面再套一层 Form.create用于提供props.form,假设你的组件名叫 FormComponent,像下面这样:

/**
 * 包装 Form 表单, 用于提供读写数据的功能
 */
FormComponent = Form.create({
    mapPropsToFields (props) {
        // 把表单中的字段映射到 props 中
        return {
            email: props. email,
            pass: props. pass
        }
    }
})(FormComponent);


export default FormComponent;

就行啦,自己试下吧

【热门文章】
【热门文章】