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="取消"
>
效果