Antd中Form表单输入组件的动态赋值

Antd:

需求

根据选择获取对应值，并将该值回显到表单的输入框中。

解决方法

首先使用createRef()获取form

formRef = React.createRef()

然后再Form表单上绑定该formRef

 <Form
                    name="normal_login"
                    className="register-form"
                    onFinish={
    
    this.onFinish}
                    ref={
    
    this.formRef}
                >

然后写个函数根据state的值动态改变输入框或者其他组件的值

<Form.Item name="avatarUrl">
                        <Input
                            prefix={
    
    <InfoCircleOutlined className="site-form-item-icon"/>}
                            name="avatarUrl"
                            placeholder="AvatarUrl"
                        />
                    </Form.Item>

 avatarUrlValue = () => {
    
    
        this.formRef.current.setFieldsValue({
    
    
            avatarUrl: this.state.avatarUrl,
        })
    }

将该函数绑定确认按钮

					<Modal
                            title="选择头像"
                            okText="确认"
                            onOk={
    
    this.avatarUrlValue}
                            visible={
    
    this.state.avatarvisible}
                            onCancel={
    
    this.AvatarCancelModal}
                            cancelText="取消"
                        >

效果